touchable-hook
provides a react hook that emulates native touch behaviour for building performant, customizable interactive widgets like buttons, list items, etc. It's a limited implementation of the touchable interface found in react-native-web. It provides the basic touchable behaviour for Sancho-UI and is built using react-gesture-responder.
Why?
When building mobile web apps it's challenging to get interactive elements to feel just right. Using this hook makes it easier:
- hover state is provided only when using a mouse.
- active state is available after a configurable delay. This is useful for avoiding highlighting list elements when scrolling, but providing immediate visual feedback on elements like buttons.
- mouse and touch support.
- keyboard support which emulates both button and anchor behaviour.
- long press support
Install
Install both touchable-hook
and react-gesture-responder
using yarn or npm.
yarn add touchable-hook react-gesture-responder
; { const bind active hover = ; return <div role="button" tabIndex=0 ...bind> This is a touchable highlight </div> ;}