❤
npm
Sign UpSign In

clicken
TypeScript icon, indicating that this package has built-in type declarations

1.5.4 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i clicken

Repository

github.com/czycha/clicken

Homepage

github.com/czycha/clicken#readme

Weekly Downloads

3

Version

1.5.4

License

MIT

Unpacked Size

19 kB

Total Files

13

Last publish

Collaborators

  • czycha
Try on RunKit
Report malware