My personal library of reusable React hooks
GitHub Package Registry
This package is published on both the
GitHub Package Registry and the
npm registry. To use the GPR, change the registry for the @jgierer12 scope
before installing:
echo "@jgierer12:registry=https://npm.pkg.github.com" >> .npmrcnpm install @jgierer12/hooksimport { useMount } from "@jgierer12/hooks";
useMount(...)
// or
import * as hooks from "@jgierer12/hooks";
hooks.useMount(...)- useEventListener
Listen for a specified event and run a callback when it occurs
- useMount
Run a callback only on initial mount, but not on rerenders
- useObjectState
On
setState, deep-merge old and new state objects. This resemblesReact.Component'sthis.setState, but with deep merging instead of shallow merging- usePersistentState
useStatewhile persisting the state tolocalStorageacross sessions- useRerender
Run a callback only on rerenders (if dependencies changed), but not on initial mount
- useTimeout
Run a callback function after waiting for a specified duration
Listen for a specified event and run a callback when it occurs
Kind: global constant
| Param | Type | Description |
|---|---|---|
| type | String |
Type of the event to listen for |
| handler | function |
Callback to run when the event occurs |
| target | EventTarget |
DOM element to attach the listener to |
Example
useEventListener(`click`, event => {
console.log(`Clicked on ${event.target}`);
});Example
useEventListener(
`focus`,
event => {
console.log(`Input was focused`);
},
myInput
);Run a callback only on initial mount, but not on rerenders
Kind: global constant
| Param | Type | Description |
|---|---|---|
| effect | function |
Effect callback to run |
Example
useMount(() => {
fetchExtraResources();
});On setState, deep-merge old and new state objects. This resembles
React.Component's this.setState, but with deep merging instead of shallow
merging
Kind: global constant
| Param | Type | Description |
|---|---|---|
| initialState | Object |
Initial state |
Example
const [state, setState] = useObjectState({
name: {
first: `Jonas`,
middle: `Ben`,
last: `Gierer`,
},
age: 4,
});
setState({
name: {
middle: ``,
},
age: 20,
});
console.log(state);
// {
// name: {
// first: `Jonas`,
// middle: ``,
// last: `Gierer`,
// },
// age: 20,
// }useState while persisting the state to localStorage across sessions
Kind: global constant
| Param | Type | Description |
|---|---|---|
| key | String |
The key under which the value should be stored |
| initialValue | * |
Fallback initial value. Will be overwritten by value from localStorage if available |
Example
const [name, setName] = usePersistentState(`name`, `Mike`);
setName(`Jonas`); // `name` will be initialized to `Jonas` instead of `Mike` in all future sessionsRun a callback only on rerenders (if dependencies changed), but not on initial mount
Kind: global constant
| Param | Type | Description |
|---|---|---|
| effect | function |
Effect callback to run |
| deps | Array |
Dependencies. Will be passed through to useEffect |
Example
useRerender(() => {
props.onChange(value);
}, [value]);Run a callback function after waiting for a specified duration
Kind: global constant
| Param | Type | Description |
|---|---|---|
| callback | function |
Callback to run after the timeout |
| ms | Number |
Time to wait in milliseconds |
| deps | Array |
Dependencies. Will be passed through to useEffect |
| useEffect | function |
Function to use instead of React.useEffect |
Example
useTimeout(
() => {
console.log(`2 seconds have passed since the component was mounted`);
},
2000,
null,
useMount
);Example
useTimeout(() => {
console.log(
`100 milliseconds have passed since the component was last rendered`
);
}, 100);Example
useTimeout(
() => {
console.log(`0.5 seconds have passed since myVar was last changed`);
},
500,
[myVar],
useRerender
);MIT © 2019 Jonas Gierer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent