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" >> .npmrc
npm install @jgierer12/hooks
import { 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
useState
while persisting the state tolocalStorage
across 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 sessions
Run 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