@jgierer12/hooks
v0.2.5
Published
jgierer12's personal library of reusable React hooks
Downloads
5
Readme
My personal library of reusable React hooks
Installation
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(...)
API
Constants
useEventListener
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
);
useMount
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();
});
useObjectState
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,
// }
usePersistentState
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
useRerender
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]);
useTimeout
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
);
License
MIT © 2019 Jonas Gierer