diff --git a/packages/behaviors/hzcore-hook-press/CHANGELOG.md b/packages/behaviors/hzcore-hook-press/CHANGELOG.md new file mode 100644 index 0000000..e4d87c4 --- /dev/null +++ b/packages/behaviors/hzcore-hook-press/CHANGELOG.md @@ -0,0 +1,4 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. diff --git a/packages/behaviors/hzcore-hook-press/README.mdx b/packages/behaviors/hzcore-hook-press/README.mdx new file mode 100644 index 0000000..0cde59c --- /dev/null +++ b/packages/behaviors/hzcore-hook-press/README.mdx @@ -0,0 +1,165 @@ +--- +name: usePress +menu: Hooks +route: /use-press +--- + +import {Playground} from 'docz'; +import {useState} from 'react'; +import usePress from '@hzcore/hook-press'; + +# usePress + +A [hook] that tracks events when the user presses the mouse button over a component. + +Main features: +- Determines when an element is being pressed +- Records the number of times an element has been pressed +- Consumes a callback handler when an element is pressed + +--- + +## Installation + +```shell +yarn add @hzcore/hook-press +``` + +--- + +## Options +```js +const {isPressed, pressCount, pressibleEl, pressProps} = usePress({defaultCount, handler}); + +interface UsePressReturn { + // If element is pressed + isPressed: boolean; + + // Number of how many times the element was pressed + pressCount: number; + + // Listeners of the press event + pressProps: PressPropsReturn; + + // Element reference + pressibleEl: object; +} + +interface UsePressProps { + // Default count number to start from, optional, default = 0 + defaultCount: number; + + // Direct handler attached to the element, optional, default = null + handler: (args: {isPressed: boolean, pressCount: number}) => void; +} +``` + +--- + +## Usage + +### Simple Usage +```js +export default Button = () => { + const {isPressed, pressProps} = usePress(); + return ( + + ); +} +``` + +### Using Count + + {() => { + + const plainStyles = { + color: 'white', + padding: '10px 20px', + fontSize: '16px', + borderRadius: '3px', + outline: 'none', + cursor: 'pointer', + } + + const Button = () => { + + const {isPressed, pressCount, pressProps} = usePress({defaultCount: 7}); + + return ( + <> + +

I have been pressed {pressCount} time{pressCount > 1 ? 's': ''}.

+ + ); + } + + return +

I have been pressed {pressCount} time{pressCount > 1 ? 's': ''}.

+ + ) + } + + return