A clean & lightweight collection of React Hooks & Utilities!
- Documentation
- What is Haiku?
- Installation Guide
- Usage Examples
- Contributing
- Package Contents
- Maintainers
- License
Haiku is a simple & lightweight React library with the goal of saving
you time by offering a large collection of hooks & utilities that will
help you get the job done faster & more efficiently!
Installing Haiku is very easy!
Requires React >=16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haikuThis project uses jest as the testing framework and React Testing Library (RTL) for testing React components and hooks.
To execute all unit tests with coverage enabled
npm run testPlease check the official Documentation for full usage examples.
import { useHover } from 'react-haiku';
const Component = () => {
const { hovered, ref } = useHover();
return <p ref={ref}>{hovered ? 'All mice on me' : 'No mice on me'}</p>;
};
export default Component;import { For } from 'react-haiku';
const Component = () => {
const list = [{ name: 'React' }, { name: 'Haiku' }];
render(
<>
<For each={list} render={(item, index) => <p>{item.name}</p>} />
</>,
);
};
export default Component;Haiku is always open to improvements and contributions, you can check the Open Issues if you want to contribute, and it's also possible to request to add your own improvements/ideas using the Feature Request template. Before contributing, please read the Contribution Guide and make sure to respect the standards! Thank you for your time!
useBatteryStatus()- Provides real-time updates on the device's battery level and charging status.useBoolToggle()- Toggle boolean state values.useClipboard()- Copy data to the user's clipboard.useClickOutside()- Detect clicks outside a target element.useConfirmExit()- Prompt the user with a message before closing the tab if the state is set as dirty.useCookie()- Manages cookies reactively, ensuring automatic sync across tabs and persistent storage for simple data.useCookieListener()- Tracks cookie changes and triggers callbacks, useful for syncing state across tabs or handling authentication updates.useDebounce()- Debounce state changes to react to updates after a delay.useDeviceOS()- Detects the user's operating system, including mobile emulators, and identifies unique or new OS versions.useEventListener()- Set event listeners on the window object or a specific target element.useFavicon()- Dynamically update the website's favicon from a component.useFirstRender()- Check whether or not a component is on its first render.useFullscreen()- Can toggle between entering fullscreen mode and exiting fullscreen mode.useHold()- Handle long presses on a target element and execute a handler after a set delay.useHover()- Quick way to detect if your mouse is over an element.useIdle()- Detect user activity/inactivity on the page based on events.useInputValue()- Manage input state with this simple hook.useIntersectionObserver()- Detects when an element enters or exits the viewport, with configurable thresholds, margins, and animation triggers.useInterval()- Manages recurring tasks with start/stop controls, ideal for polling, animations, or delayed updates.useIsomorphicLayoutEffect()- Switch between useEffect and useLayoutEffect depending on the execution environment (SSR VS Browser).useKeyPress()- Listen for specific combination of keys and trigger a callback when all the keys are pressed simultaneously.useLeaveDetection()- Detect when your user's cursor leaves the page.useLocalStorage()- Manage localStorage values dynamically.useMediaQuery()- Manipulate your component using media queries.useMousePosition()- Detect the current position of the mouse relative to a target or the whole document.useNetwork()- Monitors network status, allowing you to detect online/offline changes in your application.useOrientation()- Detects and tracks screen orientation changes, helping adapt the UI for portrait or landscape modes.usePrefersTheme()- Detect the user's preferred system theme.usePreventBodyScroll()- Disables body scrolling when active and restores it when deactivated, offering dynamic control with a boolean state and toggle function.useScrollDevice()- Detects if the user is scrolling with a mouse wheel or trackpad, allowing adaptive scroll behaviors.useScrollPosition()- Access the current scroll position on the page and modify it programmatically.useScript()- Attach script tags to the document from your components.useSingleEffect()- Run the useEffect hook strictly only once when the component is mounted.useSize()- Tracks and updates the width and height of a referenced DOM element whenever it is resized.useTabNotification()- Lets you change the browser tab's title, show alerts, and add a dot to the favicon to notify users of updates or new messages while they're on a different tab.useTitle()- Update the document's title from your components.useToggle()- Toggle state values between two different options.useUpdateEffect()- Similar to useEffect, but it skips the first render of a component and only reacts to updates triggered by dependency values.useUrgentUpdate()- Force render a component when calling this hook.useWindowSize()- Provides the current window width and height dimensions.
Class- Component that conditionally applies a CSS class based on a boolean condition.For- Dynamic rendering component with automatic key assignment.If- Component for simple conditional rendering.Image- Component that simplifies the process of rendering images.RenderAfter- Component that renders its children after a set delay.Show- Component for complex conditional rendering.Switch- Component that dynamically renders based on multiple "cases" with a "default" fallback.
MIT