Collection of React Hooks used by Charlie Tango.

Storybook Demo: https://ct-hooks.netlify.com

Install using Yarn:

yarn add @charlietango/hooks

or NPM:

npm install @charlietango/hooks --save

All of our Hooks are published into their own NPM module, so you can pick and choose exactly the ones you need.

• @charlietango/use-client-hydrated (useClientHydrated) - Check if the client has been hydrated
• @charlietango/use-element-size (useElementSize) - Measure the size of a DOM element using ResizeObserver
• @charlietango/use-focus-trap (useFocusTrap) - Trap keyboard focus inside a DOM element, to prevent the user navigating outside a modal
• @charlietango/use-id (useId) - Generate a deterministic id using a Context Provider
• @charlietango/use-interaction (useInteraction) - Monitor the user interactions on an element
• @charlietango/use-media (useMedia) - Detect if the browser matches a media query
• @charlietango/use-native-lazy-loading (useNativeLazyLoading) - Detect if the browser supports the new 'loading' attribute on Image elements.
• @charlietango/use-script (useScript) - Load an external third party script
• @charlietango/use-toggle (useToggle) - Simple boolean state toggler
• @charlietango/use-window-size (useWindowSize) - Get the width and height of the viewport

To use the Hook, import it from the package you installed, like:

import useMedia from "@charlietango/use-media";

The @charlietango/hooks module collects all of the individual modules into a single dependency. The module is optimized for tree shaking, so you application should only include the dependencies you actually use.

import { useMedia } from "@charlietango/hooks";

The @charlietango/hooks collection also includes the Hook from these libraries:

• react-intersection-observer (useInView) - Monitor when an element enters or leaves the viewport.
• react-scroll-percentage (useScrollPercentage) - Monitor the the amount an element is scrolled inside the viewport.

This hooks library is built at as a monorepo using Lerna and Yarn Workspaces.

To start working on a new hook, you should run the new-hook script to generate the new package.

yarn new-hook