https://github.com/jason89521/hooks
Some common used react hooks
https://github.com/jason89521/hooks
react react-hooks
Last synced: 3 months ago
JSON representation
Some common used react hooks
- Host: GitHub
- URL: https://github.com/jason89521/hooks
- Owner: jason89521
- Created: 2022-02-03T03:16:31.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-07T11:36:43.000Z (over 4 years ago)
- Last Synced: 2025-03-03T10:40:23.201Z (over 1 year ago)
- Topics: react, react-hooks
- Language: JavaScript
- Homepage:
- Size: 118 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# hooks
[](https://npmjs.com/package/@yuxuan-zheng/hooks)
Some common used hooks.
## API Reference
All hooks will return either a value or an array. If the return value is an array, this document will list the values in order.
- [useDebounced](#usedebounced)
- [useIntersection](#useIntersection)
### `useDebounced`
#### Description
Use this hook to get the debounced value.
#### Parameters
| Name | Type | Default value | Description |
| :--------- | :------- | :------------ | :------------------------------------------ |
| `value` | `T` | `undefined` | **Required** The value you want to debounce |
| `interval` | `number` | `1000` | The debounce interval in milliseconds |
#### Returns
| Name | Type | Description |
| :--------------- | :--- | :------------------ |
| `debouncedValue` | `T` | The debounced value |
#### Example
```js
const Example = () => {
const [value, setValue] = useState('');
const debouncedValue = useDebounced(value);
const onChange = e => setValue(e.target.value);
useEffect(() => {
// Do whatever you want upon the debounced value change
console.log(debouncedValue);
}, [debouncedValue]);
return ;
};
```
### `useIntersection`
#### Description
Use this hook to determine whether the element is displayed in viewport.
#### Parameters
This hook doesn't need parameters.
#### Returns
| Name | Type | Description |
| :--------------- | :------------------------------ | :------------------------------------------------------------------------------------ |
| `isIntersecting` | `boolean` | Use this value to determine whether the target element is intersecting with viewport. |
| `callbackRef` | `(element:HTMLElement) => void` | Pass this callback to the target element's ref. |
#### Example
```js
const Example = () => {
const [isIntersecting, callbackRef] = useIntersection();
useEffect(() => {
// Do whatever you want when the target is intersecting with viewport
}, [isIntersecting])
return
}
```