An awesome collection of React Hooks & Utilities!
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-haikuPlease 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;useClipboard()- Copy data to the user's clipboard!useHover()- Quick way to detect if your mouse is over an element!useInputValue()- Manage input state with this simple hook!useLeaveDetection()- Detect when your user's cursor leaves the page!useMediaQuery()- Manipulate your component using media queries!useMousePosition()- Detect the current position of the mouse relative to a target or the whole document!usePrefersTheme()- Detect the user's preferred system theme!useScript()- Attach script tags to the document from your components!useToggle()- Toggle state values between two different options!useBoolToggle()- Toggle boolean state values!useUrgentUpdate()- Force render a component when calling this hook!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.useDebounce()- Debounce state changes to react to updates after a delay!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!useHold()- Handle long presses on a target element and execute a handler after a set delay!useIdle()- Detect user activity/inactivity on the page based on events!useIsomorphicLayoutEffect()- Switch between useEffect and useLayoutEffect depending on the execution environment (SSR VS Browser)!useLocalStorage()- Manage localStorage values dynamicallyuseScrollPosition()- Access the current scroll position on the page and modify it programatically.useSingleEffect()- Run the useEffect hook strictly only once when the component is mounted!useTitle()- Update the document's title from your components!useUpdateEffect()- Similar to useEffect, but it skips the first render of a component, and only react to updates triggered by dependency values.
If- Component for simple conditional rendering!Show- Component for complex conditional rendering!For- Dynamic rendering component with automatic key assignment!RenderAfter- Component that renders its children after a set delay.
MIT