{"id":24698295,"url":"https://github.com/davidhdev/haiku","last_synced_at":"2025-05-15T08:06:27.635Z","repository":{"id":37238440,"uuid":"494539144","full_name":"DavidHDev/haiku","owner":"DavidHDev","description":"A clean \u0026 lightweight collection of React Hooks \u0026 Utilities!","archived":false,"fork":false,"pushed_at":"2025-02-19T15:22:13.000Z","size":827,"stargazers_count":582,"open_issues_count":29,"forks_count":85,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-07T20:05:46.827Z","etag":null,"topics":["components","frontend","hook","hooks","next","nextjs","react","react-hooks","reactjs","utilities"],"latest_commit_sha":null,"homepage":"https://reacthaiku.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DavidHDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.MD","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-20T16:42:19.000Z","updated_at":"2025-04-07T17:56:19.000Z","dependencies_parsed_at":"2024-08-11T20:25:14.743Z","dependency_job_id":"b3e21574-ba9c-4c3a-a06a-e0567b07fe08","html_url":"https://github.com/DavidHDev/haiku","commit_stats":{"total_commits":161,"total_committers":22,"mean_commits":7.318181818181818,"dds":0.6521739130434783,"last_synced_commit":"a6ed93e13e557eeae3e779ba6c6dabd968c70a16"},"previous_names":["davidhdev/haiku","davidhdev/react-haiku"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidHDev%2Fhaiku","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidHDev%2Fhaiku/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidHDev%2Fhaiku/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidHDev%2Fhaiku/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DavidHDev","download_url":"https://codeload.github.com/DavidHDev/haiku/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248976491,"owners_count":21192403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","frontend","hook","hooks","next","nextjs","react","react-hooks","reactjs","utilities"],"created_at":"2025-01-27T04:04:44.222Z","updated_at":"2025-04-14T23:24:34.949Z","avatar_url":"https://github.com/DavidHDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Haiku\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003cimg src=\"./media/haiku-logo-orange.svg\" alt=\"react-haiku\" height=\"200\"\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003cb\u003eA clean \u0026 lightweight collection of React Hooks \u0026 Utilities!\u003c/b\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003chr\u003e\n\u003c/div\u003e\n\n[![NPM](https://img.shields.io/npm/l/react-haiku)](https://github.com/DavidHDev/react-haiku/blob/main/LICENSE.md)\n[![npm](https://img.shields.io/npm/v/react-haiku)](https://www.npmjs.com/package/react-haiku)\n[![npm](https://img.shields.io/npm/dm/react-haiku)](https://www.npmjs.com/package/react-haiku)\n\n## Table of Contents\n\n- [Documentation](#documentation)\n- [What is Haiku?](#what-is-haiku)\n- [Installation Guide](#installation-guide)\n- [Usage Examples](#usage-examples)\n  - [Using Hooks](#using-hooks)\n  - [Using Utilities](#using-utilities)\n- [Contributing](#contributing)\n- [Package Contents](#package-contents)\n  - [Hooks](#hooks)\n  - [Utilities](#utilities)\n- [Maintainers](#maintainers)\n- [License](#license)\n\n---\n\n\n## Documentation\n\n- [Official Docs](https://reacthaiku.dev/)\n\n## What is Haiku?\n\nHaiku is a simple \u0026 lightweight React library with the goal of saving\u003cbr\u003e\nyou time by offering a large collection of hooks \u0026 utilities that will\u003cbr\u003e\nhelp you get the job done faster \u0026 more efficiently!\n\n## Installation Guide\n\nInstalling Haiku is very easy! \u003cbr\u003e\n_Requires React \u003e=16.8.0_\n\u003cbr\u003e\n\n#### NPM\n\n```sh\nnpm install react-haiku\n```\n\n#### Yarn\n\n```sh\nyarn add react-haiku\n```\n\n#### PNPM\n\n```sh\npnpm install react-haiku\n```\n\n\u003cbr\u003e\n\n#### Unit Testing with Jest and React Testing Library\n\nThis project uses [jest](https://jestjs.io/) as the testing framework and [React Testing Library (RTL)](https://testing-library.com/docs/react-testing-library/intro) for testing React components and hooks.\n\n#### Running Tests\n\nTo execute all unit tests with coverage enabled\n\n```sh\nnpm run test\n```\n\n## Usage Examples\n\n\u003cbr\u003e\n\nPlease check the official [Documentation](https://reacthaiku.dev/) for full usage examples.\n\n\u003cbr\u003e\n\n### Using Hooks\n\n\u003cbr\u003e\n\n```jsx\nimport { useHover } from 'react-haiku';\n\nconst Component = () =\u003e {\n  const { hovered, ref } = useHover();\n\n  return \u003cp ref={ref}\u003e{hovered ? 'All mice on me' : 'No mice on me'}\u003c/p\u003e;\n};\n\nexport default Component;\n```\n\n### Using Utilities\n\n\u003cbr\u003e\n\n```jsx\nimport { For } from 'react-haiku';\n\nconst Component = () =\u003e {\n  const list = [{ name: 'React' }, { name: 'Haiku' }];\n\n  render(\n    \u003c\u003e\n      \u003cFor each={list} render={(item, index) =\u003e \u003cp\u003e{item.name}\u003c/p\u003e} /\u003e\n    \u003c/\u003e,\n  );\n};\n\nexport default Component;\n```\n\n## Contributing\n\nHaiku is always open to improvements and contributions, you can check the [Open Issues](https://github.com/DavidHDev/react-haiku/issues) if you want to contribute, and it's also possible to request to add your own improvements/ideas using the [Feature Request](https://github.com/DavidHDev/react-haiku/issues/new/choose) template. Before contributing, please read the [Contribution Guide](https://github.com/DavidHDev/react-haiku/blob/main/CONTRIBUTING.MD) and make sure to respect the standards! Thank you for your time!\n\n## PACKAGE CONTENTS\n\n### Hooks\n\n- [`useBatteryStatus()`](https://reacthaiku.dev/docs/hooks/useBatteryStatus) - Provides real-time updates on the device's battery level and charging status.\n- [`useBoolToggle()`](https://reacthaiku.dev/docs/hooks/useToggle) - Toggle boolean state values.\n- [`useClipboard()`](https://reacthaiku.dev/docs/hooks/useClipboard) - Copy data to the user's clipboard.\n- [`useClickOutside()`](https://reacthaiku.dev/docs/hooks/useClickOutside) - Detect clicks outside a target element.\n- [`useConfirmExit()`](https://reacthaiku.dev/docs/hooks/useConfirmExit) - Prompt the user with a message before closing the tab if the state is set as dirty.\n- [`useCookie()`](https://reacthaiku.dev/docs/hooks/useCookie) - Manages cookies reactively, ensuring automatic sync across tabs and persistent storage for simple data.\n- [`useCookieListener()`](https://reacthaiku.dev/docs/hooks/useCookieListener) - Tracks cookie changes and triggers callbacks, useful for syncing state across tabs or handling authentication updates.\n- [`useDebounce()`](https://reacthaiku.dev/docs/hooks/useDebounce) - Debounce state changes to react to updates after a delay.\n- [`useDeviceOS()`](https://reacthaiku.dev/docs/hooks/useDeviceOS) - Detects the user's operating system, including mobile emulators, and identifies unique or new OS versions.\n- [`useEventListener()`](https://reacthaiku.dev/docs/hooks/useEventListener) - Set event listeners on the window object or a specific target element.\n- [`useFavicon()`](https://reacthaiku.dev/docs/hooks/useFavicon) - Dynamically update the website's favicon from a component.\n- [`useFirstRender()`](https://reacthaiku.dev/docs/hooks/useFirstRender) - Check whether or not a component is on its first render.\n- [`useFullscreen()`](https://reacthaiku.dev/docs/hooks/useFullscreen) - Can toggle between entering fullscreen mode and exiting fullscreen mode.\n- [`useHold()`](https://reacthaiku.dev/docs/hooks/useHold) - Handle long presses on a target element and execute a handler after a set delay.\n- [`useHover()`](https://reacthaiku.dev/docs/hooks/useHover) - Quick way to detect if your mouse is over an element.\n- [`useIdle()`](https://reacthaiku.dev/docs/hooks/useIdle) - Detect user activity/inactivity on the page based on events.\n- [`useInputValue()`](https://reacthaiku.dev/docs/hooks/useInputValue) - Manage input state with this simple hook.\n- [`useIntersectionObserver()`](https://reacthaiku.dev/docs/hooks/useIntersectionObserver) - Detects when an element enters or exits the viewport, with configurable thresholds, margins, and animation triggers.\n- [`useInterval()`](https://reacthaiku.dev/docs/hooks/useInterval) - Manages recurring tasks with start/stop controls, ideal for polling, animations, or delayed updates.\n- [`useIsomorphicLayoutEffect()`](https://reacthaiku.dev/docs/hooks/useIsomorphicLayoutEffect) - Switch between useEffect and useLayoutEffect depending on the execution environment (SSR VS Browser).\n- [`useKeyPress()`](https://reacthaiku.dev/docs/hooks/useKeyPress) - Listen for specific combination of keys and trigger a callback when all the keys are pressed simultaneously.\n- [`useLeaveDetection()`](https://reacthaiku.dev/docs/hooks/useLeaveDetection) - Detect when your user's cursor leaves the page.\n- [`useLocalStorage()`](https://reacthaiku.dev/docs/hooks/useLocalStorage) - Manage localStorage values dynamically.\n- [`useMediaQuery()`](https://reacthaiku.dev/docs/hooks/useMediaQuery) - Manipulate your component using media queries.\n- [`useMousePosition()`](https://reacthaiku.dev/docs/hooks/useMousePosition) - Detect the current position of the mouse relative to a target or the whole document.\n- [`useNetwork()`](https://reacthaiku.dev/docs/hooks/useNetwork) - Monitors network status, allowing you to detect online/offline changes in your application.\n- [`useOrientation()`](https://reacthaiku.dev/docs/hooks/useOrientation) - Detects and tracks screen orientation changes, helping adapt the UI for portrait or landscape modes.\n- [`usePrefersTheme()`](https://reacthaiku.dev/docs/hooks/usePrefersTheme) - Detect the user's preferred system theme.\n- [`usePreventBodyScroll()`](https://reacthaiku.dev/docs/hooks/usePreventBodyScroll) - Disables body scrolling when active and restores it when deactivated, offering dynamic control with a boolean state and toggle function.\n- [`useScrollDevice()`](https://reacthaiku.dev/docs/hooks/useScrollDevice) - Detects if the user is scrolling with a mouse wheel or trackpad, allowing adaptive scroll behaviors.\n- [`useScrollPosition()`](https://reacthaiku.dev/docs/hooks/useScrollPosition) - Access the current scroll position on the page and modify it programmatically.\n- [`useScript()`](https://reacthaiku.dev/docs/hooks/useScript) - Attach script tags to the document from your components.\n- [`useSingleEffect()`](https://reacthaiku.dev/docs/hooks/useSingleEffect) - Run the useEffect hook strictly only once when the component is mounted.\n- [`useSize()`](https://reacthaiku.dev/docs/hooks/useSize) - Tracks and updates the width and height of a referenced DOM element whenever it is resized.\n- [`useTabNotification()`](https://reacthaiku.dev/docs/hooks/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.\n- [`useTitle()`](https://reacthaiku.dev/docs/hooks/useTitle) - Update the document's title from your components.\n- [`useToggle()`](https://reacthaiku.dev/docs/hooks/useToggle) - Toggle state values between two different options.\n- [`useUpdateEffect()`](https://reacthaiku.dev/docs/hooks/useUpdateEffect) - Similar to useEffect, but it skips the first render of a component and only reacts to updates triggered by dependency values.\n- [`useUrgentUpdate()`](https://reacthaiku.dev/docs/hooks/useUrgentUpdate) - Force render a component when calling this hook.\n- [`useWindowSize()`](https://reacthaiku.dev/docs/hooks/useWindowSize) - Provides the current window width and height dimensions.\n\n\n### Utilities\n\n\n- [`Class`](https://reacthaiku.dev/docs/utilities/class) - Component that conditionally applies a CSS class based on a boolean condition.\n- [`For`](https://reacthaiku.dev/docs/utilities/for) - Dynamic rendering component with automatic key assignment.\n- [`If`](https://reacthaiku.dev/docs/utilities/if) - Component for simple conditional rendering.\n- [`Image`](https://reacthaiku.dev/docs/utilities/image) - Component that simplifies the process of rendering images.\n- [`RenderAfter`](https://reacthaiku.dev/docs/utilities/renderAfter) - Component that renders its children after a set delay.\n- [`Show`](https://reacthaiku.dev/docs/utilities/show) - Component for complex conditional rendering.\n- [`Switch`](https://reacthaiku.dev/docs/utilities/switch) - Component that dynamically renders based on multiple \"cases\" with a \"default\" fallback.\n\n\n\n## Maintainers\n\n[David Haz](https://github.com/DavidHDev)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhdev%2Fhaiku","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidhdev%2Fhaiku","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhdev%2Fhaiku/lists"}