react-haiku

library2.4.1jsnpmunverified

React Haiku is a lightweight utility library offering a comprehensive collection of React Hooks and utility components designed to streamline development and enhance efficiency. Currently at version 2.4.1, the library maintains an active release cadence, frequently adding new hooks and improving existing ones, as evidenced by multiple minor releases and updates in recent months. Its primary goal is to provide developers with ready-to-use solutions for common React patterns, such as state management, DOM manipulation, and browser API interactions, thereby saving development time. Key differentiators include its focus on being a "clean & lightweight" collection, providing a wide array of specialized hooks like `useHover`, `useBatteryStatus`, `useCookie`, and utility components like `<For />` and `<Switch />`, all while shipping with TypeScript types for improved developer experience. It requires React version 16.8.0 or newer.

web-framework

npm install react-haiku

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-HAIKU

react-haiku

web-frameworkjavascriptv2.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useHover

✓ import { useHover } from 'react-haiku';

✗ const { useHover } = require('react-haiku');

Most modern React libraries, including react-haiku, are designed for ESM imports. CommonJS `require` is not officially supported and may lead to issues.

For

✓ import { For } from 'react-haiku';

✗ import For from 'react-haiku';

The `For` utility is a named export, not a default export. Ensure you use curly braces for named imports.

useToggle

✓ import { useToggle } from 'react-haiku';

The library ships with TypeScript types, providing type safety for hook inputs and return values automatically when used in a TypeScript project.

Demonstrates common usage patterns for `useHover`, `useTitle`, and `useCookie` hooks within a React component, showcasing state management and side effects.

import React from 'react'; import { useHover, useTitle, useCookie } from 'react-haiku'; // Example 1: useHover hook const HoverComponent = () => { const { hovered, ref } = useHover(); return ( <div ref={ref} style={{ padding: '20px', border: '1px solid gray', marginBottom: '20px' }}> <p>{hovered ? 'Mouse is hovering over me!' : 'Hover over me'}</p> </div> ); }; // Example 2: useTitle hook const TitleUpdater = () => { const [currentTitle, setTitle] = React.useState('Haiku App'); useTitle(currentTitle); return ( <button onClick={() => setTitle(`Haiku Title: ${Math.random().toFixed(2)}`)}> Change Page Title </button> ); }; // Example 3: useCookie hook const CookieManager = () => { const [value, updateCookie, deleteCookie] = useCookie('my_haiku_cookie', 'initial_value'); return ( <div style={{ marginTop: '20px' }}> <p>Cookie "my_haiku_cookie": {value ?? 'Not set'}</p> <button onClick={() => updateCookie(`new_value_${Date.now()}`)}>Update Cookie</button> <button onClick={deleteCookie} style={{ marginLeft: '10px' }}>Delete Cookie</button> </div> ); }; const App = () => { return ( <div> <h1>React Haiku Examples</h1> <HoverComponent /> <TitleUpdater /> <CookieManager /> </div> ); }; export default App;

Debug

Known issues

gotchaMany hooks in `react-haiku` (e.g., `useBatteryStatus`, `useNetwork`, `usePreventBodyScroll`, `useCookie`) directly interact with browser-specific APIs. These hooks will likely cause issues or fail silently when used in Server-Side Rendering (SSR) environments like Next.js or Remix without proper client-side checks.

fix

Implement client-side only rendering for components utilizing browser-API-dependent hooks, or wrap their usage within `typeof window !== 'undefined'` checks. For Next.js, consider `dynamic(() => import('...'), { ssr: false })`.

affects: >=2.0.0

gotchaWhen using hooks like `useEventListener` or `useInterval`, ensure that any callback functions passed to them are stable. If a callback function is recreated on every render and included in the hook's dependencies, it can lead to unnecessary re-registrations or unexpected behavior.

fix

Wrap callback functions that are passed to `useEventListener`, `useInterval`, or similar hooks with `React.useCallback` to memoize them. This prevents unnecessary re-creations and ensures the hook's internal logic can correctly manage event listeners or timers.

affects: >=2.0.0

gotchaThe `useInputValue` hook, as noted in `v2.3.0`, uses an `as const` assertion on its return type. While this improves type inference for TypeScript users, it means the tuple elements are strictly typed and cannot be reassigned or modified in ways that deviate from their inferred literal types without explicit casting, which might be a surprise for some.

fix

Be aware of the strict typing when destructuring `useInputValue`. If mutable variables are needed, copy the values or explicitly cast them. For most usage patterns with input values, this `as const` assertion enhances type safety by preventing incorrect reassignments.

affects: >=2.3.0

Errors

Common errors & fixes

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Attempting to call a `react-haiku` hook (e.g., `useHover`, `useToggle`) outside of a React function component or a custom hook.

fix

Ensure all calls to `react-haiku` hooks are made directly within the body of a React function component, or within another custom hook which itself is called from a function component.

TypeError: Cannot read properties of undefined (reading 'name')

The `each` prop passed to the `<For />` utility component is `undefined` or `null`, when it expects an iterable array.

fix

Ensure that the `each` prop provided to the `<For />` component is always an array, even if empty. Initialize `list` variables with `[]` to prevent `undefined` values, e.g., `<For each={list || []} ... />`.

TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.

Using a hook like `useCookie` which returns `string | null` (if the cookie isn't found) where a `string` is strictly expected by another function or component without handling the `null` case.

fix

Check for `null` values explicitly before using the returned cookie value, or provide a default fallback. For example: `const [value] = useCookie('my_cookie'); const displayValue = value ?? 'Default';`

Upgrade

Version history

2.4.1latest on npm

Audit

Dependencies

reactrequiredreact-haiku provides custom hooks and components that depend on React's core functionalities, requiring React to be installed as a peer dependency.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/DavidHDev/react-haiku ↗

packagehttps://www.npmjs.com/package/react-haiku ↗

homepagehttps://react-haiku.vercel.app ↗