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-haiku
yarn add react-haiku
pnpm install react-haiku
This 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 test
Please 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!
-
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 dynamically -
useScrollPosition()
- 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. -
Image
- Component that simplifies the process of rendering images.
MIT