README
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