{"library":"react-haiku","title":"React Haiku Hooks & Utilities","description":"React Haiku is a lightweight utility library offering a comprehensive collection of React Hooks and utility components designed to streamline development and enhance efficiency. Currently at version 2.4.1, the library maintains an active release cadence, frequently adding new hooks and improving existing ones, as evidenced by multiple minor releases and updates in recent months. Its primary goal is to provide developers with ready-to-use solutions for common React patterns, such as state management, DOM manipulation, and browser API interactions, thereby saving development time. Key differentiators include its focus on being a \"clean & lightweight\" collection, providing a wide array of specialized hooks like `useHover`, `useBatteryStatus`, `useCookie`, and utility components like `<For />` and `<Switch />`, all while shipping with TypeScript types for improved developer experience. It requires React version 16.8.0 or newer.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-haiku"],"cli":null},"imports":["import { useHover } from 'react-haiku';","import { For } from 'react-haiku';","import { useToggle } from 'react-haiku';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { useHover, useTitle, useCookie } from 'react-haiku';\n\n// Example 1: useHover hook\nconst HoverComponent = () => {\n  const { hovered, ref } = useHover();\n  return (\n    <div ref={ref} style={{ padding: '20px', border: '1px solid gray', marginBottom: '20px' }}>\n      <p>{hovered ? 'Mouse is hovering over me!' : 'Hover over me'}</p>\n    </div>\n  );\n};\n\n// Example 2: useTitle hook\nconst TitleUpdater = () => {\n  const [currentTitle, setTitle] = React.useState('Haiku App');\n  useTitle(currentTitle);\n  return (\n    <button onClick={() => setTitle(`Haiku Title: ${Math.random().toFixed(2)}`)}>\n      Change Page Title\n    </button>\n  );\n};\n\n// Example 3: useCookie hook\nconst CookieManager = () => {\n  const [value, updateCookie, deleteCookie] = useCookie('my_haiku_cookie', 'initial_value');\n\n  return (\n    <div style={{ marginTop: '20px' }}>\n      <p>Cookie \"my_haiku_cookie\": {value ?? 'Not set'}</p>\n      <button onClick={() => updateCookie(`new_value_${Date.now()}`)}>Update Cookie</button>\n      <button onClick={deleteCookie} style={{ marginLeft: '10px' }}>Delete Cookie</button>\n    </div>\n  );\n};\n\nconst App = () => {\n  return (\n    <div>\n      <h1>React Haiku Examples</h1>\n      <HoverComponent />\n      <TitleUpdater />\n      <CookieManager />\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates common usage patterns for `useHover`, `useTitle`, and `useCookie` hooks within a React component, showcasing state management and side effects.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}