Awesome Hooks
February 13th, 2020 | 5 mins readExplanation
@dmnchzl/awesome-hooks is a collection of custom React hooks.
This library is published with the Beerware license, which means you can do whatever you want with the code.
Hooks
Below, the list of all available hooks:
useCounter
Use it to create a
simplecounter
import React from 'react';
import { useCounter } from '@dmnchzl/awesome-hooks';
export default function Counter(props) {
const { value, add, del, reset } = useCounter(0);
return (
<div>
{value}
<button onClick={() => add(2)}>+2</button>
<button onClick={() => del(2)}>-2</button>
<button onClick={reset}>0</button>
</div>
);
}
useDocumentTitle
Use it to change the site title
import React from 'react';
import { useDocumentTitle } from '@dmnchzl/awesome-hooks';
export default function HelloWorld(props) {
useDocumentTitle('Hello World');
return <div>{/* ... */}</div>;
}
useMeta
Use it to add / change a metadata
import React from 'react';
import { useMeta } from '@dmnchzl/awesome-hooks';
export default function LoremIpsum(props) {
useMeta('theme-color', '#2a2c2e');
useMeta('description', 'Lorem Ipsum Dolor Sit Amet');
return <div>{/* ... */}</div>;
}
useObject
Use it to handle an object
import React, { useEffect } from 'react';
import { useObject } from '@dmnchzl/awesome-hooks';
export default function App(props) {
const [person, setPerson, isEmpty] = useObject({
firstName: 'Morty',
lastName: 'Smith'
});
useEffect(() => {
setPerson({
firstName: 'Rick',
lastName: 'Sanchez'
});
}, [setPerson]);
return (
<ul>
{!isEmpty &&
Object.entries(person).map(([key, value], idx) => (
<li key={idx}>
{key}: {value}
</li>
))}
</ul>
);
}
useInput
Use it to handle the behaviour of an input
import React from 'react';
import { useInput } from '@dmnchzl/awesome-hooks';
export default function Input(props) {
const [value, setValue] = useInput('');
return (
<input
defaultValue={value}
onChange={setChange}
/>
);
}
useField
Use it to associate a value with a potential error (example with a form field)
import React from 'react';
import { useField } from '@dmnchzl/awesome-hooks';
export default function Form(props) {
const { value, error, setValue, setError, reset } = useField('');
const handleSubmit = event => {
event.preventDefault();
if (value.length < 5) {
setError('Too Short');
} else {
setError('Too Long');
}
};
return (
<form onSubmit={handleSubmit}>
<input
defaultValue={value}
onChange={e => setValue(e.target.value)}
/>
{error && <p>{error}</p>}
<button type="submit">Submit</button>
<button onClick={reset}>Reset</button>
</form>
);
}
useArray
Use it to handle an array
import React, { useEffect } from 'react';
import { useArray } from '@dmnchzl/awesome-hooks';
export default function List(props) {
const { values, setValues, addValue, setValue, delValue } = useArray([]);
useEffect(() => {
if (values.length < 0) {
setValues([
{ firstName: 'Rick', lastName: 'Sanchez' },
{ firstName: 'Morty', lastName: 'Smith' }
]);
}
}, [values, setValues]);
return (
<ul>
{values.map(({ firstName, lastName }) => (
<li>
<input defaultValue={value.firstName} onChange={e => setValue(e.target.value, 'firstName')}>
<button onClick={() => delValue(lastName, 'lastName')}>
Del
</button>
</li>
))}
<button onClick={() => addValue({ firstName: 'Summer', lastName: 'Smith' })}>
Add
</button>
</ul>
);
}
useMatrix
Use it to transform an array into a matrix (useful to comply with bootstrap standards)
import React, { useEffect } from 'react';
import { useMatrix } from '@dmnchzl/awesome-hooks';
export default function Grid(props) {
const { rows, setValues } = useMatrix(4);
useEffect(() => {
let values = [];
for (let i = 0; i < 12; i++) {
values = [...values, `Val ${i}`];
}
setValues(values);
}, [setValues]);
return (
<div>
{rows.map((cols, i) => (
<div
key={i}
className="row">
{cols.map((value, j) => (
<div
key={j}
className="col">
{value}
</div>
))}
</div>
))}
</div>
);
}
useTimer
Use it to play with a timer
import React from 'react';
import { useTimer } from '@dmnchzl/awesome-hooks';
export default function Calendar(props) {
const { days, hours, minutes, seconds } = useTimer(2020, 4, 4, 12);
return (
<div>
Remainin' Time Before May The 4th...
<h1>Days: {days}</h1>
<h2>Hours: {hours}</h2>
<h3>Minutes: {minutes}</h3>
<h4>Seconds: {seconds}</h4>
</div>
);
}
useStorage
Use it to handle an object (and persist it in the session / local storage)
import React, { useEffect } from 'react';
import { useStorage } from '@dmnchzl/awesome-hooks';
const USE_LOCAL_STORAGE = true;
export default function App(props) {
const [person, setPerson] = useStorage('person', USE_LOCAL_STORAGE);
useEffect(() => {
setPerson({
firstName: 'Rick',
lastName: 'Sanchez'
});
}, [setPerson]);
return (
<ul>
{Object.entries(person).map(([key, value], idx) => (
<li key={idx}>
{key}: {value}
</li>
))}
</ul>
);
}
Miscellaneous
If you want more,
You can clone the project:
git clone https://github.com/dmnchzl/awesomehooks.git
Install dependencies:
yarn install
Run all unit tests:
yarn test
And finally compile the project:
yarn build
License
"THE BEER-WARE LICENSE" (Revision 42):
<phk@FreeBSD.ORG>
wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day,
and you think this stuff is worth it, you can buy me a beer in return. Damien Chazoule</phk@FreeBSD.ORG
>