use-tap-toggle v1.0.3

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