Modular utility hooks that we often use grouped in one package.
Written in TypeScript, documented (NPM and JSDoc), unit tested (not all of them atm) and maintained.
Disclaimer: at least React 16 is needed (that's the one with hooks)).:)
The example usages are in JavaScript.
For TS users, please refer to API or JSDoc of a given hook, you have all the necessary information about types.
CodeSandbox: https://codesandbox.io/s/github/nekogd/react-utility-hooks-examples-sandbox
GitHub: https://github.com/nekogd/react-utility-hooks-examples-sandbox
Happy debugging!
The hook to inspect why the component has rerendered (we've all been (or will be) there).
If we have changes in component props, we will have them logged into js console.
This helps us a lot in debugging.
import { useWhyRerender } from '@nekogd/react-utility-hooks';
const ExampleComponent = React.memo((props) => {
const { count, style } = props;
useWhyRerender('example component name', props);
return <div style={style}>{count}</div>;
});
Check your JS console, it will be empty if props has not changed, or will show you the changes.
type IUseWhyRerender = {
[key: string]: any;
};
function useWhyRerender(componentName: string, props: IUseWhyRerender): void;
If we find ourselves adding eventListeners with useEffect a lot, it might be a good idea to abstract that to a custom hook.
More info: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
import { useEventListener } from '@nekogd/react-utility-hooks';
const ExampleComponent = () => {
// Initial state to track down mouse position
const [coords, setCoords] = useState({ x: 0, y: 0 });
// Make sure the reference don't change
const handler = useCallback(
({ clientX, clientY }) => {
setCoords({ x: clientX, y: clientY });
},
[setCoords],
);
// Add event listener using our hook
useEventListener('mousemove', handler);
return (
<>
<h2>client mouse coords</h2>
<table>
<tbody>
<tr>
<td>clientX</td>
<td>{coords.x}</td>
</tr>
<tr>
<td>clientY</td>
<td>{coords.y}</td>
</tr>
</tbody>
</table>
</>
);
};
type Target =
| (() => HTMLElement)
| HTMLElement
| React.MutableRefObject<HTMLElement>
| Window;
function useEventListener(
eventName: string,
handler: Function,
options?: { target: Target; capture?: boolean; once?: boolean; passive?: boolean },
): void;
A hook that manages click outside of target elements.
import { useClickAway } from "@nekogd/react-utility-hooks";
const ExampleComponent = () => {
const [counter, setCounter] = useState(0);
const ref = useRef();
// with TypeScript we might have to say const ref = useRef() as React.MutableRefObject<HTMLElement>;
useClickAway(() => {
setCounter((s) => s + 1);
}, ref);
return (
<>
<div>
Click anywhere outside the span to increse the counter
<span ref={ref}>
<button type="button">This does not increase the counter</button>
</span>
<p>counter: {counter}</p>
</div>
</>
);
}
function useClickAway(
onClickAway: (event: MouseEvent | TouchEvent) => void,
target: (() => HTMLElement) | HTMLElement | React.MutableRefObject,
);
Property | Description | Type | Default |
---|---|---|---|
onClickAway | Trigger Function | (event) => void | - |
target | DOM element or Ref Object | (() => HTMLElement) | HTMLElement | React.MutableRefObject | - |
Inspect if component is hovered.
import { useHover } from '@nekogd/react-utility-hooks';
const ExampleComponent = () => {
const [hoverRef, isHovered] = useHover();
return <div ref={hoverRef}> {isHovered ? 'I am hovered' : 'Not hovered'}</div>;
};
function useHover(<T extends HTMLElement>(): [
(node?: T | null) => void,
boolean,
])
Change document title without React Helmet. :)
import { useDocumentTitle } from '@nekogd/react-utility-hooks';
const ExampleComponent = () => {
useDocumentTitle(`my new Document Title`);
return <> Content of my component </>;
};
function useDocumentTitle(title: string): void;
Generate slug from input string.
import { useSlug } from '@nekogd/react-utility-hooks';
const ExampleComponent = () => {
const slug = useSlug('Some string');
return <> The slug is {slug} </>;
};
function useSlug(input: string): string | null;
Just to toggle i.e. accordions. Accepts initial boolean value.
const ExampleComponent = () => {
const { toggled, handleToggled } = useToggle();
const handleClick = () => {
handleToggled();
};
return (
<>
<button onClick={handleClick}>toggle</button>
{toggled ? 'visible' : 'hidden'}
</>
);
};
type IUseToggle = { toggled: boolean; handleToggled: (value?: boolean) => void };
function useToggle(initialState: boolean = false): IUseToggle;
Groundbreaking useCounter example to give understanding of the flow of this package i.e. types and tests.
import { useCounter } from "@nekogd/react-utility-hooks";
const ExampleComponent = () => {
const { count, increment, reset, decrement } = useCounter();
return (
<>
<button onClick={increment}>Increment counter</button>
<button onClick={reset}>Reset counter</button>
<button onClick={decrement}>Decrement counter</button>
<p>{count}</p>
</>
);
};
type IUseCounter = {
count: number;
increment: () => void;
reset: () => void;
decrement: () => void;
};
function useCounter(initialValue: number = 0): IUseCounter;