React Hooks

This library provides a set of custom React hooks that help simplify common patterns and interactions in React applications. These hooks aim to improve code reusability, readability, and maintainability.

📦 Install

Note: This package is currently only available via GitHub Packages.

Setting up GitHub Packages access

1. Generate a GitHub personal access token with read:packages scope:

   • Go to GitHub Settings → Personal Access Tokens
   • Generate a new token with at least the read:packages permission
   • Copy the token value

2. Create or update your .npmrc file in your project root or home directory:

@kaelui:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

3. Install the package:

pnpm add @kaelui/hooks

🪝 Available Hooks

• useDisclosure: manages disclosure state (open/closed).
• useResizeObserver: uses ResizeObserver to track changes in element dimensions.
• useMediaQuery: subscribe and respond to media query changes.
• useMounted: returns true if component is mounted.
• useDidUpdate: executes a callback function when dependencies change, but skips the initial mount effect.
• useLogger: automatically logs specified values to the console on each component render for debugging.
• useWindowEvent: adds an event listener to the window object.
• useReducedMotion: detects if the user has requested reduced motion.
• useScrollIntoView: smoothly scrolls an element into view with customizable animation, alignment, and other options.
• useLongPress: detects long press gestures on mouse and touch events with customizable threshold and callbacks.

🧑🏽‍💻 Development

Creating a New Hook

To create a new hook with all the required files, run:

pnpm create-hook

This will prompt you for a hook name and description, then automatically generate necessary files.

License

MIT