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, divs and spans as opposed to as and buttons).

Install

yarn add clicken

npm i --save clicken

Usage

import clicken from 'clicken'

const emptyObject = clicken(undefined) // returns {}
const empty = clicken.onKeyPress(false) // returns undefined

const events = clicken((e) => { console.log(e) }) // returns { onClick, onKeyPress }, onClick === the passed function
const keyPressOnly = clicken.onKeyPress((e) => { console.log(`Pressed '${e.key}'`) }) // returns function

const eventsKeyPressDefaultPrevented = clicken(() => { console.log('No page jumps!') }, true) // returns { onClick, onKeyPress }, where onKeyPress auto-calls e.preventDefault() to stop page jumps
const keyPressDefaultPrevented = clicken.onKeyPress(() => { console.log('No page jumps!') }, true) // returns function which auto-calls e.preventDefault() to stop page jumps

Examples

import React from 'react'
import clicken from 'clicken'

const AlertButton = ({ text }) => (
  <div
    className='button--alert'
    tabIndex='0'
    role='button'
    {...clicken(() => { window.alert(text) })}
  >
    Alert!
  </div>
)

export default AlertButton

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:

import React from 'react'
import clicken from 'clicken'

const AlertButton = ({ text }) => {
  const onClick = () => { window.alert(text) }
  const onKeyPress = clicken.onKeyPress(() => { window.alert(text) })
  return (
    <div
      className='button--alert'
      tabIndex='0'
      role='button'
      onClick={onClick}
      onKeyPress={onKeyPress}
    >
      Alert!
    </div>
  )
}

export default AlertButton

Why return onClick?

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 {...clicken(() => { console.log('event') })} />

is simpler than this:

const onClick = () => { console.log('event') }
const onKeyPress = clicken.onKeyPress(fn)
return <div onClick={onClick} onKeyPress={onKeyPress} />

However, clicken.onKeyPress has its uses, especially when interacting with non-JSX frameworks such as jQuery:

const onClick = () => { console.log('event') }
const onKeyPress = clicken.onKeyPress(onClick)
$('div').click(onClick).keypress(onKeyPress);

License

MIT © James Anthony Bruno