A set of reusables for React mainly used by ourselves.
Catches errors and passes it to the provided element.
Usage:
import { ErrorBoundary } from '@maskingtech/react-toolkit';
function ErrorHandler({ error }: { error: unknown })
{
return <>Oops...</>;
}
<ErrorBoundary element={ErrorHandler}>
{/* Content goes here */}
</ErrorBoundary>;Delays value updates for a period of time.
Usage:
import { useDebouncedValue } from '@maskingtech/react-toolkit';
function MyComponent()
{
const initialValue: number = 0; // required
const onChange = (debouncedValue: number) => { }; // optional
const delay = 300; // optional, default 500
const [debouncedValue, setValue] = useDebouncedValue(initialValue, onChange, delay);
return <p>
{debouncedValue}
<button onClick={() => setValue(debouncedValue + 1)}>Increase</button>
</p>;
}Gives a form element focus after mount.
Usage:
import { useFocusOnMount } from '@maskingtech/react-toolkit';
function MyComponent()
{
const ref = useFocusOnMount();
return <input type="text" ref={ref} />;
}Provides access to the data of a form after submitting.
Usage:
import { useForm } from '@maskingtech/react-toolkit';
function MyComponent()
{
const submitHandler = (data: FormData) { console.log(data.get('name')); };
const [ref, state, handleSubmit] = useForm(submitHandler);
// states: 'pristine' | 'dirty' | 'submitting'
return <form ref={ref} onSubmit={handleSubmit}>
<input type="text" name="name" />
<input type="submit" value="Submit" disabled={state !== 'dirty'} />
</form>;
}Provides access to the data of a form without submitting.
Usage:
import { useFormData } from '@maskingtech/react-toolkit';
function MyComponent()
{
const dataHandler = (data: FormData) { console.log(data.get('name')); };
const [ref, state, handleData] = useFormData(dataHandler);
// states: 'idle' | 'working'
return <form ref={ref}>
<input type="text" name="name" />
<input type="button" value="Go!" disabled={state !== 'working'} />
</form>;
}Provides helpers for loading data.
Usage:
import { useLoadData } from '@maskingtech/react-toolkit';
async function getData() { /* get data here */ }
function MyComponent()
{
const [data, isLoading, refresh, setData] = useLoadData(getData);
if (isLoading) return <>Loading...</>;
return <p>
{data}
<button onClick={() => refresh()}>Refresh</button>
</p>;
}Provides helpers for loading paginated data.
Usage:
import { useLoadData } from '@maskingtech/react-toolkit';
async function getPageData(page: number) { /* get data here */ }
function MyComponent()
{
const [data, isLoading, isFinished, next, previous, reset, setData] = useLoadData(useLoadData);
if (isLoading) return <>Loading...</>;
return <p>
{data}
<button onClick={() => previous()}>Previous</button>
<button onClick={() => next()}>Next</button>
<button onClick={() => reset()}>Reset</button>
</p>;
}