https://github.com/zattoo/use-double-click

React hook for combining double-click function into click event, as well as repeatable double-click
https://github.com/zattoo/use-double-click

double-click react react-hooks

Last synced: 2 months ago
JSON representation

React hook for combining double-click function into click event, as well as repeatable double-click

• Host: GitHub
• URL: https://github.com/zattoo/use-double-click
• Owner: zattoo
• License: mit
• Created: 2020-05-04T11:02:34.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T22:05:51.000Z (12 months ago)
• Last Synced: 2024-04-14T20:24:44.638Z (3 months ago)
• Topics: double-click, react, react-hooks
• Language: JavaScript
• Homepage: https://medium.com/@nitzan.nashi/repeatable-double-click-and-hybrid-clicks-solution-with-usedoubleclick-hook-c6c64449abf7
• Size: 159 KB
• Stars: 18
• Watchers: 16
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/contributing.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Lists

• awesome-react-hooks - `use-double-click` - clicks and combining click and double-click events (Packages)
• awesome-react-hooks-cn - `use-double-click` - clicks and combining click and double-click events (Packages)
• awesome-react-hooks - `use-double-click` - clicks and combining click and double-click events (Packages)
• fucking-awesome-react-hooks - `use-double-click` - clicks and combining click and double-click events (Packages)
• awesome-react-hooks - `use-double-click` - clicks and combining click and double-click events (Packages)

README

        
# useDoubleClick

[React hook][0] for continuous double-clicks and combining click and double-click events

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

### Install

```shell

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

```

### Usage

```jsx

export const Example = () => {

    const [doubleClickCount, setDoubleClickCount] = useState(0);

    const [clickCount, setClickCount] = useState(0);

    const hybridClick = useDoubleClick(

        () => setDoubleClickCount(doubleClickCount + 1),

        () => setClickCount(clickCount + 1),

    );

    return (

        

            
You clicked {clickCount} times

            
You double-clicked {doubleClickCount} times

            

                Click me

            

        

    );

}

```


### 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

[0]: https://reactjs.org/docs/hooks-intro.html

[1]: https://medium.com/@nitzan.nashi/repeatable-double-click-and-hybrid-clicks-solution-with-usedoubleclick-hook-c6c64449abf7?sk=ed5c9edf3017fb2b7b277b76217fc393