Charlie Tango Hooks

Collection of React Hooks used by Charlie Tango.

Storybook Demo: https://ct-hooks.now.sh

Installation

Install using Yarn:

yarn add @charlietango/hooks

or NPM:

npm install @charlietango/hooks --save

The Hooks

Individual hooks

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-lazy-ref (useLazyRef) - Create a new ref with lazy instantiated value
• @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";

@charlietango/hooks

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";

Contributing

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