React Haiku

A clean & lightweight collection of React Hooks & Utilities!

---

Links

• Official Docs

What is this?

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!

Install

Installing Haiku is very easy!
Requires React >=16.8.0

NPM

npm install react-haiku

Yarn

yarn add react-haiku

PNPM

pnpm install react-haiku

Unit Testing with Jest and React Testing Library

This project uses jest as the testing framework and React Testing Library (RTL) for testing React components and hooks.

Running Tests

To execute all unit tests with coverage enabled

npm run test

Usage Examples

Please check the official Documentation for full usage examples.

Using Hooks

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;

Using Utilities

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;

Contributing

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!

PACKAGE CONTENTS

Hooks

• 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.

Utilities

• 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.

Maintainers

David Haz

License

MIT