### Install lenis Package

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Instructions to install the `lenis` package, which is a dependency for `lenis/react`, using npm.

```bash
npm i lenis
```

--------------------------------

### Install HAMO React Hooks Library

Source: https://github.com/darkroomengineering/hamo/blob/main/README.md

This command installs the HAMO React hooks library using npm, making it available for use in your JavaScript or TypeScript projects. It's the first step to integrate these performance-oriented hooks into your application.

```bash
$ npm i hamo
```

--------------------------------

### Example Usage of useTimeout Hook in React

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-timeout/README.md

Demonstrates how to import and use the `useTimeout` hook from the 'hamo' library. It sets a callback function to execute after a specified delay, logging 'timeout' to the console after 5000 milliseconds.

```jsx
import { useTimeout } from 'hamo'

function App() {
  useTimeout(() => {
    console.log('timeout')
  }, 5000)
}
```

--------------------------------

### Configure Global Debounce for useRect Hook

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-rect/README.md

This example shows how to configure a global debounce delay for all instances of the `useRect` hook. By calling `useRect.setDebounce()`, you can control the frequency of measurement updates across your application, optimizing performance for resize observations.

```javascript
useRect.setDebounce(500)
```

--------------------------------

### Integrate ReactLenis with Custom requestAnimationFrame Loop

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Example demonstrating how to integrate `ReactLenis` with a custom `requestAnimationFrame` loop. This involves setting `autoRaf: false` and manually calling `lenis.raf(time)` within your own animation frame update function.

```jsx
import { ReactLenis } from 'lenis/react'
import { useEffect, useRef } from 'react'

function Component() {
  const lenisRef = useRef()
  
  useEffect(() => {
    function update(time) {
      lenisRef.current?.lenis?.raf(time)
    }
  
    const rafId = requestAnimationFrame(update)
  
    return () => cancelAnimationFrame(rafId)
  }, [])
  
  return (
    <ReactLenis options={{ autoRaf: false }} ref={lenisRef}>
      { /* content */ }
    </ReactLenis>
  )
}
```

--------------------------------

### Integrate ReactLenis with GSAP Ticker

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Example showing how to integrate `ReactLenis` with GSAP's `gsap.ticker` for animation frame management. It involves setting `autoRaf: false` and linking `lenis.raf` to GSAP's update cycle for synchronized smooth scrolling.

```jsx
import gsap from 'gsap'
import { ReactLenis } from 'lenis/react'
import { useEffect, useRef } from 'react'

function Component() {
  const lenisRef = useRef()
  
  useEffect(() => {
    function update(time) {
      lenisRef.current?.lenis?.raf(time * 1000)
    }
  
    gsap.ticker.add(update)
  
    return () => gsap.ticker.remove(update)
  }, [])
  
  return (
    <ReactLenis options={{ autoRaf: false }} ref={lenisRef}>
      { /* content */ }
    </ReactLenis>
  )
}
```

--------------------------------

### Basic and Lazy Usage of useResizeObserver Hook in React

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-resize-observer/README.md

Demonstrates how to import and use the `useResizeObserver` hook in a React component. It shows both basic usage to get the observer state and lazy usage with a callback function for custom handling of resize events. The hook requires setting a ref on the element to observe.

```tsx
import { useResizeObserver } from 'hamo'

function App() {
  // Basic usage
  const [setResizeObserverRef, resizeObserver] = useResizeObserver()

  // Lazy usage
  const [setResizeObserverRef] = useResizeObserver({
      lazy: true,
      callback: (entry) => {
        console.log(entry)
      },
    })

  return <div ref={setResizeObserverRef} />
}
```

--------------------------------

### Integrate ReactLenis with Framer Motion Frame Loop

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Example illustrating how to integrate `ReactLenis` with Framer Motion's `frame` and `cancelFrame` for animation frame management. This involves setting `autoRaf: false` and linking `lenis.raf` to Framer Motion's update cycle for synchronized smooth scrolling.

```jsx
import { ReactLenis } from 'lenis/react'
import { cancelFrame, frame } from 'framer-motion';
import { useEffect, useRef } => {

function Component() {
  const lenisRef = useRef()

  useEffect(() => {
    function update(time) {
      lenisRef.current?.lenis?.raf(time)
    }

    frame.update(update, true)

    return () => cancelFrame(update)
  }, [])


  return (
    <ReactLenis options={{ autoRaf: false }} ref={lenisRef}>
      { /* content */ }
    </ReactLenis>
  )
}
```

--------------------------------

### ReactLenis Component Props API Reference

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Detailed documentation for the configurable properties of the `<ReactLenis>` component, including options for Lenis instance settings, root element usage, and custom class names.

```APIDOC
ReactLenis Props:
- options: Lenis options (https://github.com/darkroomengineering/lenis#instance-settings)
- root: Lenis will be instanciate using <html> scroll. Default: false.
- className: Class name for the wrapper div. Default: ''.
```

--------------------------------

### useLenis Hook API Reference

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Documentation for the `useLenis` hook, which provides access to the Lenis instance. It details the `callback` for scroll events, `deps` for re-triggering, and `priority` for execution order.

```APIDOC
useLenis Hook:
- callback: The function to be called whenever a scroll event is emitted
- deps: Trigger callback on change
- priority: Manage callback execution order
```

--------------------------------

### useMediaQuery Hook API Reference

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-media-query/README.md

Detailed API documentation for the `useMediaQuery` React hook, outlining its parameters and return value.

```APIDOC
useMediaQuery:
  Parameters:
    query (string): The media query to test against.
  Returns:
    isMatch (boolean): Whether the media query is true or false.
```

--------------------------------

### useResizeObserver Hook Parameters

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-resize-observer/README.md

Defines the configurable options for the `useResizeObserver` hook. Parameters include `lazy` for state update control, `callback` for custom logic on resize, `options` for `ResizeObserver.observe` method, and `debounce` for performance optimization. It also details the `deps` parameter for callback dependencies.

```APIDOC
parameters (object):
  lazy (optional, default: false): If true, the resize observer will not trigger state changes.
  callback (optional): The callback function to call when the element size changes.
  options (optional): The options to pass to the ResizeObserver.observe method. See ResizeObserver.observe options for more information.
  debounce (optional, default: 500): The delay (in milliseconds) before the resize event is processed. This helps to optimize performance by reducing the number of times the callback function is called during resizing. Alternatively, you can set the global useResizeObserver.setDebounce function to change the default debounce delay.
deps (optional, default: []): The dependencies to be used in the callback function.
```

--------------------------------

### Basic ReactLenis Component and useLenis Hook Usage

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/README.md

Demonstrates how to import and use the `ReactLenis` component to provide a Lenis instance via context and the `useLenis` hook to access it for handling scroll events in a React functional component.

```jsx
import { ReactLenis, useLenis } from 'lenis/react'

function Component() {
  const lenis = useLenis(({ scroll }) => {
    // called every scroll
  })

  return (
    <ReactLenis root>
      { /* content */ }
    </ReactLenis>
  )
}
```

--------------------------------

### useRect Hook Parameters

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-rect/README.md

Defines the optional configuration object accepted by the `useRect` hook, detailing parameters such as `ignoreTransform`, `ignoreSticky`, `debounce`, `lazy`, and `callback`, along with their types, default values, and purpose.

```APIDOC
useRect(options?: object):
  options:
    ignoreTransform: boolean (default: false)
      If true, ignores CSS transform applied to the element and its parents. Useful for animations such as parallax.
    ignoreSticky: boolean (default: true)
      If true, ignores sticky positioning of the element and its parents.
    debounce: number (default: 500)
      Delay in milliseconds for debouncing measurement updates.
    lazy: boolean (default: false)
      If true, doesn't trigger state update and returns a getter instead.
    callback: function
      A callback function to be invoked whenever the dimensions or position of the element change.
  deps: array
    An array of dependencies.
```

--------------------------------

### useWindowSize Hook API Reference

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-window-size/README.md

Detailed API documentation for the `useWindowSize` React hook, including its optional `debounce` parameter and the structure of its return value (width, height, and dpr).

```APIDOC
useWindowSize Hook:
  Parameters:
    debounce (optional, default: 500):
      The delay (in milliseconds) before the window resize event is processed. This helps to optimize performance by reducing the number of times the callback function is called during resizing. Alternatively, you can set the global `useWindowSize.setDebounce` function to change the default debounce delay.
  Return Value:
    An object containing the current window width and height:
      width (number): The current width of the window.
      height (number): The current height of the window.
      dpr (number): The current device pixel ratio of the window.
```

--------------------------------

### useResizeObserver Hook Return Value

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-resize-observer/README.md

Describes the array returned by the `useResizeObserver` hook, which includes a ref-setting function and the current resize observer entry. The type of the `entry` depends on whether the `lazy` parameter is set to `true`.

```APIDOC
An array containing the setResizeObserverRef function and the resizeObserver state.
setResizeObserverRef (function): A function to set the ref of the element to observe.
entry (ResizeObserverEntry | (entry: ResizeObserverEntry) => void): The current resize observer entry. If lazy is true, entry is a function that returns the current resize observer entry.
```

--------------------------------

### Using useWindowSize React Hook to Display Window Dimensions

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-window-size/README.md

Demonstrates how to import and use the `useWindowSize` hook within a React functional component to display the current window width, height, and device pixel ratio.

```jsx
import { useEffect } from 'react'
import { useWindowSize } from 'hamo'

function App() {
  const { width, height, dpr } = useWindowSize()

  return (
    <div>
      <p>Window width: {width}</p>
      <p>Window height: {height}</p>
      <p>Device pixel ratio: {dpr}</p>
    </div>
  )
}
```

--------------------------------

### Configure Global Debounce for useResizeObserver

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-resize-observer/README.md

Illustrates how to globally set the default debounce delay for all instances of `useResizeObserver` using the `useResizeObserver.setDebounce` function. This allows for centralized performance optimization across multiple uses of the hook.

```jsx
useResizeObserver.setDebounce(500)
```

--------------------------------

### useLazyState Hook Parameters

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-lazy-state/README.md

Defines the input parameters accepted by the `useLazyState` React hook, including the initial state value, the callback function for state changes, and optional dependencies.

```APIDOC
initialValue (any): The initial value of the state.
callback (function): The callback function to be called when the state changes.
deps (array): The dependencies to be used in the callback function.
```

--------------------------------

### Globally Setting Debounce Delay for useWindowSize Hook

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-window-size/README.md

Illustrates how to set a global debounce delay for the `useWindowSize` hook using the `useWindowSize.setDebounce` function, optimizing performance during window resizing.

```jsx
useWindowSize.setDebounce(500)
```

--------------------------------

### Detect Media Query Match in React

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-media-query/README.md

Demonstrates how to use the `useMediaQuery` hook in a React component to check if a specific media query, such as `(min-width: 800px)`, is currently true. It imports the hook and displays the boolean result.

```jsx
import { useEffect } from 'react'
import { useMediaQuery } from 'hamo'

function App() {
  const isMobile = useMediaQuery('(min-width: 800px)')

  return (
    <div>
      isMobile: {isMobile ? 'true' : 'false'}
    </div>
  )
}
```

--------------------------------

### useTimeout Hook API Parameters

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-timeout/README.md

Defines the parameters accepted by the `useTimeout` hook, including the callback function, delay duration, and an optional dependency array.

```APIDOC
useTimeout(callback: Function, delay: number, deps?: Array<any>): void

Parameters:
- callback (Function):
  The callback function to be executed after the delay.
- delay (number):
  The delay (in milliseconds) before the callback function is executed.
- deps (Array<any>, optional):
  The dependencies array for the hook.
```

--------------------------------

### useIntersectionObserver Hook API Reference

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-intersection-observer/README.md

Detailed API documentation for the `useIntersectionObserver` React hook, including its configurable parameters and the structure of its return value.

```APIDOC
useIntersectionObserver(options?: object): [setElement: function, entry: IntersectionObserverEntry | ((entry: IntersectionObserverEntry) => void)]

Parameters:
  root (optional): The element to observe.
  rootMargin (optional, default: 0px): The margin around the root element.
  threshold (optional, default: 0): The threshold at which the callback is triggered.
  once (optional, default: false): If true, the observer will disconnect after the element is once intersected.
  lazy (optional, default: false): If true, the observer will not trigger state changes.
  callback (optional): The callback function to call when the element is intersected.
  deps (optional): The dependencies to be used in the callback function.

Return Value:
  setElement (function): A function to set the ref of the element to observe.
  entry (IntersectionObserverEntry | (entry: IntersectionObserverEntry) => void): The current intersection observer entry.
```

--------------------------------

### Basic Usage of useLazyState Hook in React

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-lazy-state/README.md

Demonstrates how to import and use the `useLazyState` hook within a React functional component. It initializes the state with a value and provides a callback function that executes on state changes, logging the new and previous values without triggering a component re-render.

```jsx
import { useLazyState } from 'hamo'

function App() {
  const [setState, getState] = useLazyState(0, (value, previousValue) => {
    console.log(value, previousValue)
  })
}
```

--------------------------------

### Trigger Programmatic Resize for useRect Instances

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-rect/README.md

This snippet demonstrates how to programmatically trigger a resize event for all active `useRect` instances. This is useful for scenarios where you need to force a recalculation of element dimensions and positions outside of standard DOM resize events, such as after a layout change or data update.

```javascript
useRect.resize()
```

--------------------------------

### useRect Hook Return Value

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-rect/README.md

Describes the array returned by the `useRect` hook, which includes a ref setter, the `rect` object (or a getter function if `lazy` is true) containing detailed dimension and position properties, and an optional `setWrapperRef` function for custom wrapper element observation.

```APIDOC
useRect() returns [setRef, rect | getRect, setWrapperRef]:
  1. setRef: function
       A function that should be passed as the `ref` prop to the target DOM element.
  2. rect | getRect: object | function
       An object representing the current dimensions and position of the element. If `lazy` is `true`, `rect` is a function that returns the current dimensions and position of the element.
       Properties of rect object:
         element: DOM element
           The DOM element being measured.
         resize: function
           A function to trigger manual resizing when needed.
         width: number
           The width of the element.
         height: number
           The height of the element.
         top: number
           The distance from the top of the document to the top of the element.
         y: number
           Alias for `top`.
         left: number
           The distance from the left of the document to the left of the element.
         x: number
           Alias for `left`.
         right: number
           The distance from the left of the document to the right of the element.
         bottom: number
           The distance from the top of the document to the bottom of the element.
  3. setWrapperRef: function
       A function to set a reference to the wrapper element. Default wrapper element is `document.body`. Any time the wrapper element is resized, the dimensions and position of the target element are recalculated.
```

--------------------------------

### useLazyState Hook Return Value

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-lazy-state/README.md

Describes the functions returned by the `useLazyState` React hook, which allow for updating the state and retrieving its current value.

```APIDOC
setState (function): The function to update the state.
getState (function): The function to get the current value of the state.
```

--------------------------------

### React useRect Hook Basic and Lazy Usage

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-rect/README.md

This snippet demonstrates the fundamental usage of the `useRect` hook in a React component. It shows how to obtain the `setRectRef` function to attach to a DOM element and access the `rect` object containing its dimensions. It also illustrates 'lazy usage' where `getRect` is returned instead of `rect`, allowing on-demand measurement, and how to use a callback function for updates.

```jsx
import { useRect } from 'hamo'

function App() {
  // Basic usage
  const [setRectRef, rect] = useRect()
  console.log(rect)

  // Lazy usage
  const [setRectRef, getRect] = useRect({
    lazy: true,
    callback: (rect) => {
      console.log(rect)
    },
  })

  return (
    <div ref={setRectRef} />
  )
}
```

--------------------------------

### React useRect Hook with Custom Wrapper Element

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-rect/README.md

This snippet illustrates how to specify a custom wrapper element for the `useRect` hook. By providing `setWrapperRef` to a parent DOM element, the hook will recalculate the target element's dimensions and position whenever this specific wrapper element is resized, offering more granular control over measurement triggers than the default `document.body`.

```jsx
import { useRect } from 'hamo'

function App() {
  const [setRectRef, rect, setWrapperRef] = useRect()
  console.log(rect)

  return (
    <div ref={setWrapperRef} />
  )
}
```

--------------------------------

### Observe Element Visibility with useIntersectionObserver React Hook

Source: https://github.com/darkroomengineering/hamo/blob/main/packages/react/src/use-intersection-observer/README.md

This snippet demonstrates how to import and use the `useIntersectionObserver` hook in a React functional component. It sets a ref on a `div` element and logs whether the element is currently intersecting the viewport.

```tsx
import { useIntersectionObserver } from 'hamo'

function App() {
  const [setElement, entry] = useIntersectionObserver()

  console.log(entry?.isIntersecting)

  return <div ref={setElement} />
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.