Taply

Helper for creating tappable components.

It allows to handle pressed, hovered and focused states consistently
across different input methods - mouse, touch and keyboard.

- Fixes sticky hover and pressed state for touch
- Prevents focus when using mouse and touch, but still allows to focus using keyboard

Install

``
npm install taply
`

Example

`js
import Taply from 'taply'

const tappableElement = (
onTap={() => console.log('Tap')}
onChangeTapState={tapState => {
// tapState is an object with keys 'isHovered', 'isPressed' and 'isFocused'
this.setState(tapState)
}}
>


)

// Any component can be a child (React components should forward ref to inner DOM-element)
const tappableComponent = (



)

// Also, you can use function that takes tapState and returns element
const tappableFn = (

{(tapState, ref) => (

Tap me

)}

)
`

Props

$3

Type: element|(tapState: object, ref) => element

Tap state is an object with following properties: isHovered, isPressed and isFocused.

$3


Type: (event) => void

Tap event handler.

$3

Type: (tapState) => void

Handler of state changes.

$3

Type: (tap: object) => void

$3

Type: (tap: object) => void

$3

Type: (event: object) => void

Focus event handler.

$3

Type: (event: object) => void

Blur event handler.

$3

Type: bool

Disables events handling.

$3

Type: bool


Default: true

$3

Type: string|number


Default: 0

HTML tabindex attribute.

$3


Type: bool


Default: true

$3

Type: bool


Default: true

Taply sets tabIndex and disabled attributes on the html-element.
When you have multiple nested Taply` components, it is ambigious which one
should control attributes, so you can disable it.