https://github.com/bmcmahen/touchable-hook

a react hook that emulates native touch behaviour for things like buttons, list items, and more
https://github.com/bmcmahen/touchable-hook

hooks hover react touch

Last synced: about 2 months ago
JSON representation

a react hook that emulates native touch behaviour for things like buttons, list items, and more

• Host: GitHub
• URL: https://github.com/bmcmahen/touchable-hook
• Owner: bmcmahen
• Created: 2019-05-01T23:49:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-21T21:48:42.000Z (over 5 years ago)
• Last Synced: 2024-04-25T05:20:56.238Z (5 months ago)
• Topics: hooks, hover, react, touch
• Language: TypeScript
• Size: 1.09 MB
• Stars: 35
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        


    

# touchable-hook

  

[![npm package](https://img.shields.io/npm/v/touchable-hook/latest.svg)](https://www.npmjs.com/package/touchable-hook)

[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](

https://twitter.com/intent/follow?screen_name=benmcmahen

)




`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](https://github.com/necolas/react-native-web/). It provides the basic touchable behaviour for [Sancho-UI](https://github.com/bmcmahen/sancho) and is built using [react-gesture-responder](https://github.com/bmcmahen/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

```

```js

import { useTouchable } from "touchable-hook";

function TouchableHighlight({ onPress, onLongPress }) {

  const { bind, active, hover } = useTouchable({

    onPress,

    onLongPress,

    behavior: "button" // or 'link'

  });

  return (

    


      This is a touchable highlight

    

  );

}

```