All Projects → zattoo → use-double-click

zattoo / use-double-click

Licence: MIT license
React hook for combining double-click function into click event, as well as repeatable double-click

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to use-double-click

Rxjs Hooks
React hooks for RxJS
Stars: ✭ 1,953 (+11388.24%)
Mutual labels:  react-hooks
Reactfire
Hooks, Context Providers, and Components that make it easy to interact with Firebase.
Stars: ✭ 2,908 (+17005.88%)
Mutual labels:  react-hooks
use-google-sheets
📝 A React Hook for getting data from Google Sheets API v4
Stars: ✭ 75 (+341.18%)
Mutual labels:  react-hooks
Use Http
🐶 React hook for making isomorphic http requests
Stars: ✭ 2,066 (+12052.94%)
Mutual labels:  react-hooks
Fre
👻 Tiny Footprint Concurrent UI library for Fiber.
Stars: ✭ 3,195 (+18694.12%)
Mutual labels:  react-hooks
discourse-adplugin
Official Discourse Advertising Plugin. Install & Start Serving Ads on Your Discourse Forum
Stars: ✭ 115 (+576.47%)
Mutual labels:  double-click
Graphql Hooks
🎣 Minimal hooks-first GraphQL client
Stars: ✭ 1,610 (+9370.59%)
Mutual labels:  react-hooks
react-use-countdown
React hook for countdown state.
Stars: ✭ 19 (+11.76%)
Mutual labels:  react-hooks
Project chat application
This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a real time chat application. Covered topics: React.js, Node.js, Express.js, and Socket.io.
Stars: ✭ 2,966 (+17347.06%)
Mutual labels:  react-hooks
use-axios-react
React axios hooks for CRUD
Stars: ✭ 31 (+82.35%)
Mutual labels:  react-hooks
Haunted
React's Hooks API implemented for web components 👻
Stars: ✭ 2,197 (+12823.53%)
Mutual labels:  react-hooks
React Form
⚛️ Hooks for managing form state and validation in React
Stars: ✭ 2,270 (+13252.94%)
Mutual labels:  react-hooks
react-hooks-lifecycle
⚛️ 🪝 ⏳ React hooks lifecycle diagram: Functional components lifecycle explained
Stars: ✭ 194 (+1041.18%)
Mutual labels:  react-hooks
React Firebase Hooks
React Hooks for Firebase.
Stars: ✭ 2,227 (+13000%)
Mutual labels:  react-hooks
use-route-as-state
Use React Router route and query string as component state
Stars: ✭ 37 (+117.65%)
Mutual labels:  react-hooks
React Cloud Music
React 16.8打造精美音乐WebApp
Stars: ✭ 1,722 (+10029.41%)
Mutual labels:  react-hooks
use-double-click
🐁 A simple React hook for differentiating single and double clicks on the same component.
Stars: ✭ 47 (+176.47%)
Mutual labels:  double-click
react-facade
Experimental dependency injection for React hooks
Stars: ✭ 95 (+458.82%)
Mutual labels:  react-hooks
react-immer-hooks
Easy immutability in React Hooks with Immer.
Stars: ✭ 45 (+164.71%)
Mutual labels:  react-hooks
react-7h-hooks
(持续增加中)提供一些偏业务的实用 react hooks, 让你每天只工作 7 小时 !
Stars: ✭ 15 (-11.76%)
Mutual labels:  react-hooks

useDoubleClick

React hook for continuous double-clicks and combining click and double-click events

See Repeatable double-click and hybrid clicks solution with useDoubleClick hook article for more details.

Install

npm i @zattoo/use-double-click --save --save-exact

Usage

export const Example = () => {
    const [doubleClickCount, setDoubleClickCount] = useState(0);
    const [clickCount, setClickCount] = useState(0);

    const hybridClick = useDoubleClick(
        () => setDoubleClickCount(doubleClickCount + 1),
        () => setClickCount(clickCount + 1),
    );

    return (
        <section>
            <p>You clicked {clickCount} times</p>
            <p>You double-clicked {doubleClickCount} times</p>
            <button
                type="button"
                onClick={hybridClick}
            >
                Click me
            </button>
        </section>
    );
}

Parameters

  • doubleClick: (event? React.SyntheticEvent) => void - double-click function to be executed when user double-clicks (single or multiple times) on the bounded component.
  • click?: (event? React.SyntheticEvent) => void - click function to be executed when user clicks (single time) on the bounded component.
  • options?: Object
    • timeout?: number - number of milliseconds to detect double-click event
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].