@thecolvinco/react-hooks

🪝 @thecolvinco/react-hooks

Utility hooks to be used in the application.

🚀 Installation and requeriments

React 17^ | 18^

pnpm install @thecolvinco/react-hooks

Available hooks

useDidUpdateEffect

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

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

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

useDisclosure

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

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

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

useHttpState

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

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;

useIsMounted

React hook to check if the component is still mounted.

👉 View source code

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]);

useMobileDetect

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

👉 View source code

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

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

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

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

  return (
    <div>
      <h1>Lorem ipsum dolor sit amet</h1>
      <div ref={ref} style={{ height: '300px' }}>
        {isVisible && <span>Display visible content on near screen.</span>}
      </div>
    </div>
  );
}

useOutsideClick

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

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

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

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