项目作者: zattoo

项目描述 :
React hook for combining double-click function into click event, as well as repeatable double-click
高级语言: JavaScript
项目地址: git://github.com/zattoo/use-double-click.git
创建时间: 2020-05-04T11:02:34Z
项目社区:https://github.com/zattoo/use-double-click

开源协议:MIT License

下载


useDoubleClick

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

See @nitzan.nashi/repeatable-double-click-and-hybrid-clicks-solution-with-usedoubleclick-hook-c6c64449abf7?sk=ed5c9edf3017fb2b7b277b76217fc393">Repeatable double-click and hybrid clicks solution with useDoubleClick hook article for more details.

Install

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

Usage

  1. export const Example = () => {
  2. const [doubleClickCount, setDoubleClickCount] = useState(0);
  3. const [clickCount, setClickCount] = useState(0);
  4. const hybridClick = useDoubleClick(
  5. () => setDoubleClickCount(doubleClickCount + 1),
  6. () => setClickCount(clickCount + 1),
  7. );
  8. return (
  9. <section>
  10. <p>You clicked {clickCount} times</p>
  11. <p>You double-clicked {doubleClickCount} times</p>
  12. <button
  13. type="button"
  14. onClick={hybridClick}
  15. >
  16. Click me
  17. </button>
  18. </section>
  19. );
  20. }

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