🪝 @thecolvinco/react-hooks

Utility hooks to be used in the application.

🚀 Installation and requeriments

> React 17^ | 18^

``node
pnpm install @thecolvinco/react-hooks
`

Available hooks

$3

If you need to skip the first render of functional component _(the equivalent of componentDidMount method in class component)_, useDidUpdateEffect hook is right for the job.

👉 View source code

`tsx
export default function () {
const [state, setState] = useState({ name: '' });

useDidUpdateEffect(() => {
setState(user);
}, [user]);
}
`

$3

useDisclosure is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such as Modal, AlertDialog, ...

👉 View source code

`tsx
import { useDisclosure } from '@thecolvinco/hooks';

const { isOpen, onOpen, onClose } = useDisclosure();
`

$3

Hook to assist in HTTP requests and manage errors, data, and request loading status.

First param of useHttpState is a fetchData receives the request and the hook itself captures the errors. The second parameter is the array of dependencies to return execute the request.

👉 View source code

`tsx
import { useHttpState } from '@thecolvinco/hooks';

const userId = '6cae06dc-47bb-4bbc-8a40-25ebda2213cc';

const { error, data, isLoading } = useHttpState(() => {
return axios('//acme.inc/api');
}, [userId]);

return isLoading ? 'Loading...' : error || data;
`

$3

React hook to check if the component is still mounted.

👉 View source code

`tsx
import { useIsMounted } from '@thecolvinco/hooks';

const isMounted = useIsMounted();

useEffect(() => {
const fetchData = async () => {
const { data } = await axios('//acme.inc/api');
if (isMounted) {
setData(data);
}
};

fetchData();
}, [isMounted]);
`

$3

React hook to detect the device type. This hook is able to detect mobile, desktop, android or iOS device.

👉 View source code

`tsx
import { useMobileDetect } from '@thecolvinco/hooks';

const isMobile = useMobileDetect();

return isMobile ? 'Short text' : 'Long more text explanation';
`

### useOnScreen

This hook allows you to easily detect when an element is visible on the screen as well as specify how much of the element should be visible before being considered on screen.

👉 View source code

`tsx
import { useState, useEffect, useRef, type MutableRefObject } from 'react';

export default function () {
const ref = useRef(null);

const isVisible = useOnScreen(ref, '-300px');

return (


useOutsideClick is a custom hook that handles click events outside a specific DOM element, like a div. A handler is invoked when a click or touch event happens outside the referenced element.

This hook is compatible with mouse and touch events.

👉 View source code

`tsx
import { useRef, useState } from 'react';
import { useOutsideClick } from '@thecolvinco/hooks';

const ref = useRef();
const [isModalOpen, setIsModalOpen] = useState(false);

useOutsideClick({
ref,
handler: () => setIsModalOpen(false),
});
``