@kmpizmad/react-hooks-util

- Introduction
- Guidelines
- Lifecycle hooks
- useMountEffect
- useUnmountEffect
- useUpdateEffect
- usePrevState
- DOM hooks
- useToggle
- useEventListener
- useScript
- Util hooks
- useTimeout
- useDebounce
- useTextShortener
- useOnlineStatus
- useRenderCount
- useDebugInfo
- useLocalStorage
- useSessionStorage
- Asynchronous hooks
- useAsync
- useFetch
- Types
- AsyncObject
- AsyncError
- DebugInfo
- FetchConfig
- State
- StorageObject
- TimeoutObject
- ToggleObject
- Value

Introduction

> Utility library for common React hooks

The idea was to create a library that contains common functionalities abstracted into hooks rather than implementing them everytime in every project.

Guidelines

- Checkout the latest updates in the [changelog][changelog_url]
- See our [contributing guidelines][contributing_url]
- See our [Support Guide][support_url]
- See our [Security Policy][security_url]

Lifecycle hooks

$3

_type_: (effect: React.EffectCallback) => void

Represents the componentDidMount method from React class components

``typescript
const DidMountComponent = () => {
const [value, setValue] = React.useState(0);
const [dependency, setDependency] = React.useState(0);

useMountEffect(() => {
setValue(dependency + 1);
});

return (


_type_: (effect: React.EffectCallback, deps: React.DependencyList = []) => void

Represents the componentWillUnmount method from React class components

`typescript
const WillUnmountComponent = () => {
const [value, setValue] = React.useState(0);

useUnmountEffect(() => {
setValue(-1);
});

return

_type_: (effect: React.EffectCallback, deps?: React.DependencyList) => void

Renders whenever a dependency changes or if provided without a dependency list, renders on any change. Avoid providing an empty dependency list

`typescript
const DidUpdateComponent = () => {
const [value, setValue] = React.useState(0);
const [dependency, setDependency] = React.useState(0);

useUpdateEffect(() => {
setValue(dependency);
}, [dependency]);

return (


_type_: (state: PrevState) => PrevState

getSnapshotBeforeUpdate, componentShouldUpdate and componentWillRecieveProps combined in one. Captures the previous state based on the input object

`typescript
const PrevStateComponent = () => {
const [dependency, setDependency] = React.useState(0);
const prevState = usePrevState({ dependency });

return (


_type_: (initialValue?: boolean) => ToggleObject

Toggles state between true and false

`typescript
const ToggleComponent = (props: { initialValue?: boolean }) => {
const { value, toggle } = useToggle(props.initialValue);
return (


_type_: (type: keyof WindowEventMap, callback: (event: Event) => void, element: HTMLElement | Document | (Window & typeof globalThis) = window) => void

Attaches a global event listener to the element (window object by default).

`typescript
const EventListenerComponent = () => {
const [value, setValue] = React.useState('Loading');

useEventListener('load', () => {
setTimeout(() => {
setValue('Hello World!');
}, 100);
});

return

_type_: (url: string) => AsyncObjectWithoutData

Loads in a script and adds a new script node to the DOM.

`typescript
const ScriptComponent = () => {
const { loading, error } = useScript(
'https://code.jquery.com/jquery-3.6.0.min.js'
);

if (loading) return

_type_: (callback: () => void, ms: number) => TimeoutObject

Basically setTimeout as a hook.

`typescript
const TimeoutComponent = () => {
const [count, setCount] = React.useState(10);
const { clear, reset } = useTimeout(() => setCount(0), 1000);

return (


_type_: (callback: () => void, ms: number, deps: React.DependencyList = []) => void

`typescript
const DebounceComponent = () => {
const [count, setCount] = React.useState(0);
const [dependency, setDependency] = React.useState(10);
useDebounce(() => setCount(dependency), 200, [dependency]);

return (


_type_: (text: string, options: TextShortenerOptions) => string

Shortens a text to a specified limit. Customizable through options.

`typescript
const TextShortenerComponent = (props: Omit) => {
const [limit, setLimit] = React.useState(11);
const short = useTextShortener('Lorem ipsum dolor sit amet', {
limit,
...props,
});

return (


_type_: () => boolean

Returns true or false. Depends on the browser agent status.

$3

_type_: () => number

$3

_type_: >(Component: React.ComponentType, props: Record) => DebugInfo

`typescript
const DebugComponent: React.FC<{ count: number }> = props => {
const [count, setCount] = React.useState(props.count);
const debug = useDebugInfo(DebugComponent, { count });

return (


_type_: (key: string, defaultValue: Value) => StorageObject

Handles and stores data in window.localStorage

`typescript
const LocalStorageComponent = () => {
const { value, update, remove } = useLocalStorage('test', 'Hello World!');
return (


_type_: (key: string, defaultValue: Value) => StorageObject

Handles and stores data in window.sessionStorage

`typescript
const SessionStorageComponent = () => {
const { value, update, remove } = useSessionStorage('test', 'Hello World!');
return (


_type_: (promise: () => Promise, deps: React.DependencyList = []) => AsyncObject

Handles async functions, re-evaluates whenever a dependency changes

`typescript
const AsyncComponent = (props: { success?: boolean }) => {
const { loading, error, data } = useAsync(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
props.success ? resolve('Hello World!') : reject({ message: 'Error' });
}, 1000);
});
});

return (


_type_: (config: FetchConfig, deps: React.DependencyList = []) => AsyncObject

Handles API requests, uses the built-in fetch module

Types

$3

`typescript
{
loading: boolean;
error: AsyncError | undefined;
data: T | undefined;
}
`

$3

`typescript
{
message: string;
[key: number | string]: any;
}
`

$3

`typescript
{
renderCount: number;
changedProps: Record;
timeSinceLastRender: number;
lastRenderTimestamp: number;
}
`

$3

`typescript
{
url: string;
options?: RequestInit
};
`

$3

`typescript
{
[key: number | string]: any
};
`

$3

`typescript
{
value: Value;
update: (value: Value) => void;
remove: () => void;
}
`

$3

`typescript
{
reset: () => void;
clear: () => void;
}
`

$3

`typescript
{
value: boolean;
toggle: () => void
}
`

$3

`typescript
string | number | boolean | Record | null | undefined
``

[changelog_url]: https://github.com/kmpizmad/react-hooks-util/blob/master/docs/CHANGELOG.md
[contributing_url]: https://github.com/kmpizmad/react-hooks-util/tree/master/docs/CONTRIBUTING.md
[support_url]: https://github.com/kmpizmad/react-hooks-util/tree/master/docs/SUPPORT.md
[security_url]: https://github.com/kmpizmad/react-hooks-util/tree/master/docs/SECURITY.md