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 ;
+ }}
+
+
+
+### Using Handlers
+
+ {() => {
+
+ const plainStyles = {
+ color: 'white',
+ padding: '10px 20px',
+ fontSize: '16px',
+ borderRadius: '3px',
+ outline: 'none',
+ cursor: 'pointer',
+ }
+
+ const Button = () => {
+ // Saving the current color of the button
+ const [color, setColor] = useState('#43454d');
+
+ // Generate and set a random color for the button when clicked
+ const handleClick = (event, args) => {
+ const newColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
+ setColor(newColor);
+ }
+
+ // Setting press features with a default count number as 1
+ // and attaching the handler specific to this press
+ const {pressCount, pressProps} = usePress({handler: handleClick});
+
+ return (
+ <>
+
+ I have been pressed {pressCount} time{pressCount > 1 ? 's': ''}.
+ >
+ )
+ }
+
+ return ;
+ }}
+
+
+
+
+
+[hook]: https://reactjs.org/docs/hooks-overview.html
\ No newline at end of file
diff --git a/packages/behaviors/hzcore-hook-press/__tests__/usePress_test.tsx b/packages/behaviors/hzcore-hook-press/__tests__/usePress_test.tsx
new file mode 100644
index 0000000..7ece47b
--- /dev/null
+++ b/packages/behaviors/hzcore-hook-press/__tests__/usePress_test.tsx
@@ -0,0 +1,14 @@
+/* eslint-env jest, browser */
+import React from 'react';
+import {render} from 'react-testing-library';
+import usePress from '../src';
+
+test('usePress is implemented', () => {
+ const PressUser = (): JSX.Element => {
+ usePress();
+ return
;
+ }
+ const {container} = render();
+ expect(container).toBeInTheDocument();
+ throw new Error('implement usePress and write some tests!');
+});
diff --git a/packages/behaviors/hzcore-hook-press/package.json b/packages/behaviors/hzcore-hook-press/package.json
new file mode 100644
index 0000000..aa21536
--- /dev/null
+++ b/packages/behaviors/hzcore-hook-press/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@hzcore/hook-press",
+ "version": "0.0.1",
+ "main": "cjs/index.js",
+ "module": "es/index.js",
+ "typings": "src/index.tsx",
+ "license": "MIT",
+ "publishConfig": {
+ "registry": "http://npmregistry.hzdg.com"
+ },
+ "files": [
+ "cjs",
+ "es",
+ "src",
+ "!*/__test*"
+ ]
+}
diff --git a/packages/behaviors/hzcore-hook-press/src/index.tsx b/packages/behaviors/hzcore-hook-press/src/index.tsx
new file mode 100644
index 0000000..7c9f284
--- /dev/null
+++ b/packages/behaviors/hzcore-hook-press/src/index.tsx
@@ -0,0 +1,51 @@
+import {useState, useEffect, useRef} from 'react';
+
+interface UsePressReturn {
+ isPressed: boolean;
+ pressCount: number;
+ pressProps: {
+ onMouseDown: () => void;
+ onMouseUp: () => void;
+ };
+ pressibleEl: React.MutableRefObject;
+}
+
+const usePress = (props: {
+ defaultCount: number;
+ handler: (args: {isPressed: boolean; pressCount: number}) => void | null;
+}): UsePressReturn => {
+ const {defaultCount, handler} = props;
+ const [isPressed, setIsPressed] = useState(false);
+ const [pressCount, setPressCount] = useState(defaultCount);
+ const pressibleEl = useRef(null);
+
+ const pressProps = {
+ ref: pressibleEl,
+ onMouseDown: () => {
+ if (!isPressed) {
+ setIsPressed(true);
+ setPressCount(pressCount + 1);
+ }
+ },
+ onMouseUp: () => {
+ if (isPressed) {
+ setIsPressed(false);
+ }
+ },
+ };
+
+ useEffect(() => {
+ if (handler && isPressed) {
+ handler.call(pressibleEl, {isPressed, pressCount});
+ }
+ }, [isPressed, pressCount]);
+
+ return {isPressed, pressCount, pressProps, pressibleEl};
+};
+
+usePress.defaultProps = {
+ defaultCount: 0,
+ handler: null,
+};
+
+export default usePress;