Skip to content
a react hook that emulates native touch behaviour for things like buttons, list items, and more
Branch: master
Clone or download
Latest commit 6e53265 May 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook initial commit May 1, 2019
src remove some unused code May 21, 2019
stories add very simple long press functionality, May 21, 2019
.gitignore
.npmignore initial commit May 1, 2019
Readme.md update readme May 21, 2019
babel.config.js initial commit May 1, 2019
jest.config.js initial commit May 1, 2019
package.json 1.2.1 May 7, 2019
rollup.config.js initial commit May 1, 2019
tsconfig.json initial commit May 1, 2019
yarn.lock use react-gesture-responder (renamed) May 7, 2019

Readme.md

touchable-hook

npm package Follow on Twitter

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
import { useTouchable } from "touchable-hook";

function TouchableHighlight({ onPress, onLongPress }) {
  const { bind, active, hover } = useTouchable({
    onPress,
    onLongPress,
    behavior: "button" // or 'link'
  });

  return (
    <div role="button" tabIndex={0} {...bind}>
      This is a touchable highlight
    </div>
  );
}
You can’t perform that action at this time.