React Hooks Docz
Getting StartedInstallUsageContributingChangeloguse-intersection-observeruse-mouse-positionuse-on-hoveruse-scroll-directionuse-scroll-progressuse-scroll-to-topuse-window-size

What's this

Collection of useful hooks that we re-use at Jam3

Why?

The react landscape has been changing rapidly since the introduction of hooks in early 2019 with 16.8.0, know you could effectively only use functional components with hooks.

The idea of this library is hold useful hooks to be quicky added to new and existing projects.

For more information about hooks go to the official documentation and also watch this talk by the React team.

You could face 3 cases

  1. The functionality that you need is already here so just run npm install.
  2. There is some missing functionality, you could make a PR to improve the docs and make it more dynamic for example.
  3. Your use case is too specific, just copy and paste the hook and adapt it to your needs, this way you at least have an starting point.

Install

npm install @jam3/react-hooks
yarn add @jam3/react-hooks

Usage

// Import depending what you need it will tree-shake the modules
import { useIntersectionObserver } from "@jam3/react-hooks";
import { useMousePosition } from "@jam3/react-hooks";
import { useOnHover } from "@jam3/react-hooks";
import { useScrollDirection } from "@jam3/react-hooks";
import { useScrollProgress } from "@jam3/react-hooks";
import { useScrollToTop } from "@jam3/react-hooks";
import { useWindowSize } from "@jam3/react-hooks";

For more information, please refer to Usage in our documentation.

Contributing

Please make sure to read the contributing guide before making a pull request.

Changelog

Detailed changes for each release are documented in the release notes.