An accessible show/hide JS library.
View modal and sidenav examples for usage.
✔︎ Traps focus via the inert attribute
✔︎ Hide via the ESC key or an optional overlay
✔︎ Assumes no styling layer
$ npm install butane-show-hide --save-dev
import ButaneShowHide from 'butane-show-hide'
ButaneShowHide.init()
ButaneShowHide.init({
showTrigger: 'data-custom-show',
hideTrigger: 'data-custom-hide',
onShow: (trigger, target) => console.log('Show ' + target.getAttribute('id')),
onHide: (trigger, target) => console.log('Hide ' + target.getAttribute('id'))
})
This project was heavily inspired by the work of Indrashish Ghoshs micromodal and Hugo Giraudel's work on A11y Dialog. 👏🏻
MIT. © 2018 Alex Carpenter