react-helpful-utils

This library requires React v16.8 or later.

Collection of handy utility functions and hooks designed to enhance your React development experience. It provides a set of convenient tools that can be utilized across different React projects.

Installation

using npm:

npm install --save react-helpful-utils

or yarn:

yarn add react-helpful-utils

API

• useConst
• useDebounce
• useDerivedState
• useForceRerender
• useMergedRef
• usePrevious
• useNonNullablePrevious
• useUpdateEffect
• setRef
• join
• mapAndJoin

useConst

This hook allows you to create a constant value within a functional component, ensuring that the value remains the same across renders

const useConst: <T>(getConst: () => T) => T;

useDebounce

A hook that delays the update of a value until a specified period of inactivity has occurred. Useful for handling user input or events that trigger frequent updates.

const useDebounce: <T extends string | number | boolean | null | undefined>(
  value: T,
  delay: number
) => T;

useDerivedState

A hook for managing derived state within a component. It provides a state value and an updater function.

const useDerivedState: <T>(outerValue: T) => [T, Dispatch<SetStateAction<T>>];

useForceRerender

React hook to force a component rerender.

const useForceRerender: () => () => void;

useMergedRef

A hook that combines multiple refs into a single callback ref. Simplifies managing multiple references for an element or component.

const useMergedRef: <T>(...refs: Ref<T>[]) => RefCallback<T>;

usePrevious

A hook that returns the previous value of a provided value. Useful for tracking changes and performing actions based on previous values.

const usePrevious: <T>(value: T) => T | undefined;

useNonNullablePrevious

Same to usePrevious, but returns the previous non-null and non-undefined value of a provided value.

const useNonNullablePrevious: <T>(value: T) => T | undefined;

useUpdateEffect

A hook that executes an effect function after the initial render, excluding the first render. Useful when you want to skip the effect during component mount and only run it on subsequent renders when the dependencies change.

const useUpdateEffect: typeof useEffect;

setRef

A utility function that assigns a value to a provided ref. Supports both function and mutable ref object types.

const setRef: <T>(ref: Ref<T> | undefined, instance: T | null) => void;

join

A utility function that concatenates an array of ReactNodes with a specified separator JSX element, resulting in a new array.

const join: (arr: ReactNode[], separator: JSX.Element) => ReactNode[];

mapAndJoin

A utility function that maps an array of items to an array of ReactNodes using a mapper function, and concatenates them with a separator JSX element. Performs mapping and concatenation simultaneously, resulting in a new array.

const mapAndJoin: <T>(
  arr: T[],
  mapper: (item: T, index: number) => ReactNode,
  separator: JSX.Element
) => ReactNode[];

License

MIT © Krombik