Skip to content
πŸŒ— An accessible show/hide JS library.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package.json

README.md

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

You can’t perform that action at this time.