\n\t
\n\t
![\"react-haiku\"](\"./media/haiku-logo-orange.svg\"){kind=logo}
\n\t\n\t
\n\tA clean & lightweight collection of React Hooks & Utilities!\n\t
\n\t
\n\t
\n\t
\n\t
\n
\n\t{hovered ? 'All mice on me' : 'No mice on me'}
;\n};\n\nexport default Component;\n```\n\n### Using Utilities\n\n{item.name}
} />\n ,\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","readmeFilename":"README.md"}