butane-show-hide

An accessible show/hide JS library.

View modal and sidenav examples for usage.

Features

✔︎ Traps focus via the inert attribute
✔︎ Hide via the ESC key or an optional overlay
✔︎ Assumes no styling layer

Install

$ npm install butane-show-hide --save-dev

Usage

import ButaneShowHide from 'butane-show-hide'

ButaneShowHide.init()

Options

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'))
})

Acknowledgements

This project was heavily inspired by the work of Indrashish Ghoshs micromodal and Hugo Giraudel's work on A11y Dialog. 👏🏻

License

MIT. © 2018 Alex Carpenter