clicken 🐓
Give clicken
a function and it will return an onKeyPress handler. This is to comply with accessibility standards for elements that are typically non-interactive (for example, div
s and span
s as opposed to a
s and button
s).
Install
yarn add clicken
npm i --save clicken
Usage
const emptyObject = // returns {}const empty = clicken // returns undefined const events = // returns { onClick, onKeyPress }, onClick === the passed functionconst keyPressOnly = clicken // returns function const eventsKeyPressDefaultPrevented = // returns { onClick, onKeyPress }, where onKeyPress auto-calls e.preventDefault() to stop page jumpsconst keyPressDefaultPrevented = clicken // returns function which auto-calls e.preventDefault() to stop page jumps
Examples
const AlertButton = <div className='button--alert' tabIndex='0' role='button' ... > Alert! </div>
This would create an element that would perform an alert on click and on pressing the enter or space button when focused on the element.
This is equivalent to the following:
const AlertButton = { const onClick = { window } const onKeyPress = clicken return <div className='button--alert' tabIndex='0' role='button' onClick=onClick onKeyPress=onKeyPress > Alert! </div> }
onClick
?
Why return The returned onClick
is exactly the same as the passed function, so what's the point in returning it? It's basically just there as a shortcut for React and other frameworks that use JSX so a developer can define the onClick and onKeyPress in one function call.
This:
return <div ... />
is simpler than this:
const onClick = { console }const onKeyPress = clickenreturn <div onClick=onClick onKeyPress=onKeyPress />
However, clicken.onKeyPress
has its uses, especially when interacting with non-JSX frameworks such as jQuery:
const onClick = { console }const onKeyPress = clicken;
License
MIT © James Anthony Bruno