use-tap-toggle
v1.0.3
Published
A hook which fixes tap handling on mobile phones
Downloads
9
Readme
use-tap-toggle
A hook which fixes tap handling on mobile phones
The problem
Controls in mobile web browsers sometimes behave inconsistently. This library allows you
- to reset active state on scroll
- to reliably display a custom style on a tapped element
- taps result in persistent active state if UI blocks (page transition)
Also you can watch this talk by awesome Alex Holachek with live demos to have a discriptive explanation
Live demo with use-tap-toggle
https://codesandbox.io/s/use-tap-toggle-demo-kcobj
Install
npm install --save use-tap-toggle
Usage
import React from 'react'
import useTapToggle from 'use-tap-toggle'
const App = () => {
// call this hook in the root app component
useTapToggle()
return <div>This is the root of your app</div>
}
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './styles.module.scss'
export const LinkWithFixedTap = (props) => (
<Link
{...props}
className={styles.link}
// pass data-attribute to a component which should have tap behaviour fixed
data-tap
/>
)
.link {
&:active,
&:hover {
color: blue;
text-decoration: none;
}
// add css rule for active state
&[data-tap='active'] {
background-color: red;
// transition-delay is used to prevent tap state activating on scroll
transition: background-color 0ms 70ms;
}
}
License
MIT © Uncleseneca
Acnowledgements
This library is heavily inspired by this talk by awesome Alex Holachek