Collection of React Hooks used by Charlie Tango.
Storybook Demo: https://ct-hooks.netlify.com
Install using Yarn:
yarn add @charlietango/hooksor NPM:
npm install @charlietango/hooks --saveAll 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) - onitor the the amount an element is scrolled inside the viewport.