### Install @react-simplikit/mobile with bun

Source: https://github.com/toss/react-simplikit/blob/main/docs/mobile/installation.md

Use this command to install the package using bun.

```sh
bun add @react-simplikit/mobile
```

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

### Install react-simplikit

Source: https://github.com/toss/react-simplikit/blob/main/llms.txt

Install the react-simplikit package using npm, yarn, or pnpm.

```bash
npm install react-simplikit
# or yarn add react-simplikit
# or pnpm add react-simplikit
```

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

### Install @react-simplikit/mobile

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @react-simplikit/mobile
# or
yarn add @react-simplikit/mobile
# or
pnpm add @react-simplikit/mobile
```

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

### Basic Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/usePrevious/usePrevious.md

An example demonstrating how to use the usePrevious hook to get the previous value of a counter state.

```APIDOC
## Example Usage

```tsx
import React, { useState } from 'react';
import { usePrevious } from './usePrevious'; // Assuming usePrevious is exported from here

function Counter() {
  const [count, setCount] = useState(0);
  // initial value of previousCount is `0`
  const previousCount = usePrevious(count);

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {previousCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;
```
```

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

### Install @react-simplikit/mobile with yarn

Source: https://github.com/toss/react-simplikit/blob/main/docs/mobile/installation.md

Use this command to install the package using yarn.

```sh
yarn add @react-simplikit/mobile
```

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

### Install React Simplikit Core Utilities

Source: https://github.com/toss/react-simplikit/blob/main/README.md

Use this command to install the core utilities package, which includes universal hooks.

```bash
npm install react-simplikit
```

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

### Install @react-simplikit/mobile with pnpm

Source: https://github.com/toss/react-simplikit/blob/main/docs/mobile/installation.md

Use this command to install the package using pnpm.

```sh
pnpm add @react-simplikit/mobile
```

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

### Basic Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useVisibilityEvent/useVisibilityEvent.md

An example demonstrating how to use the useVisibilityEvent hook to log the document's visibility state to the console.

```APIDOC
## Example Usage

### Description
This example shows a basic implementation of the `useVisibilityEvent` hook. It logs a message to the console whenever the document's visibility changes.

### Code
```tsx
import { useVisibilityEvent } from 'react-simplikit';

function Component() {
  useVisibilityEvent(visibilityState => {
    console.log(`Document is now ${visibilityState}`);
  });

  return <p>Check the console for visibility changes.</p>;
}
```
```

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

### File Structure Example

Source: https://github.com/toss/react-simplikit/blob/main/examples/DEMO_GUIDELINES.md

Provides an example of the typical file structure for demo pages, including shared components and specific demo implementations for Vite and Next.js.

```treeview
examples/
├── shared/src/components/   # Shared components
│   ├── Button.tsx
│   ├── Card.tsx
│   ├── CodeBlock.tsx
│   ├── Dialog.tsx
│   ├── InfoBox.tsx
│   ├── StatusCard.tsx
│   └── StatusRow.tsx
├── with-nextjs/app/demos/   # Next.js demos
│   └── {hook-name}/page.tsx
└── with-vite/src/pages/demos/  # Vite demos
    └── {HookName}Demo.tsx
```

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

### Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useLongPress/useLongPress.md

An example demonstrating how to use the useLongPress hook in a React component.

```jsx
import { useLongPress } from 'react-simplikit';
import React, { useState } from 'react';

function ContextMenu() {
  const [menuVisible, setMenuVisible] = useState(false);

  const longPressHandlers = useLongPress(() => setMenuVisible(true), {
    delay: 400,
    onClick: () => console.log('Normal click'),
    onLongPressEnd: () => console.log('Long press completed'),
  });

  return (
    <div>
      <button {...longPressHandlers}>Press and hold</button>
      {menuVisible && <div className="context-menu">Context Menu</div>}
    </div>
  );
}
```

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

### ImpressionArea Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/components/ImpressionArea/ImpressionArea.md

This example demonstrates how to use the ImpressionArea component in a React application, including setting up callbacks for impression start and end events, and defining visibility thresholds.

```tsx
import React from 'react';
import ImpressionArea from './ImpressionArea';

function App() {
  return (
    <ImpressionArea
      onImpressionStart={() => console.log('Element entered view')}
      onImpressionEnd={() => console.log('Element exited view')}
      timeThreshold={1000}
      areaThreshold={0.5}
    >
      <div>Track me!</div>
    </ImpressionArea>
  );
}
```

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

### Install React Simplikit Mobile Utilities

Source: https://github.com/toss/react-simplikit/blob/main/README.md

Use this command to install the mobile web utilities package for features like viewport and keyboard management.

```bash
npm install @react-simplikit/mobile
```

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

### Install react-design-philosophy Plugin

Source: https://github.com/toss/react-simplikit/blob/main/packages/plugin/README.md

Add the plugin to your Claude Code marketplace and then install it. Ensure you use the sparse-checkout option to keep the clone minimal.

```bash
claude plugin marketplace add https://github.com/toss/react-simplikit \
  --sparse .claude-plugin packages/plugin

claude plugin install react-design-philosophy@react-design-philosophy
```

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

### useMap Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useMap/useMap.md

Demonstrates how to initialize and use the useMap hook, including accessing and updating the Map state.

```APIDOC
## Example Usage

```tsx
const [userMap, actions] = useMap<string, User>([
  ['user1', { name: 'John', age: 30 }],
]);

// Using values from the Map
const user1 = userMap.get('user1');

// Updating the Map
actions.set('user2', { name: 'Jane', age: 25 });
```
```

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

### useDebounce Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useDebounce/useDebounce.md

An example demonstrating how to use the useDebounce hook in a React component for search input.

```APIDOC
## Example Usage

```tsx
import React, { useState } from 'react';
import useDebounce from './useDebounce'; // Assuming useDebounce is in the same directory

// Mock searchAPI function
const searchAPI = (value: string) => {
  console.log('Searching for:', value);
};

function SearchInput() {
  const [query, setQuery] = useState('');

  const debouncedSearch = useDebounce((value: string) => {
    searchAPI(value);
  }, 300);

  return (
    <input
      value={query}
      onChange={e => {
        setQuery(e.target.value);
        debouncedSearch(e.target.value);
      }}
      placeholder="Enter search term"
    />
  );
}

export default SearchInput;
```
```

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

### Install react-simplikit with npm, pnpm, yarn, or bun

Source: https://github.com/toss/react-simplikit/blob/main/docs/core/installation.md

Use your preferred package manager to install the react-simplikit library. These commands add the package to your project's dependencies.

```sh
npm install react-simplikit
```

```sh
pnpm add react-simplikit
```

```sh
yarn add react-simplikit
```

```sh
bun add react-simplikit
```

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

### useInterval Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useInterval/useInterval.md

A basic example demonstrating how to use the useInterval hook to update a timer.

```APIDOC
## Example Usage

```tsx
import { useInterval } from 'react-simplikit';
import { useState } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useInterval(() => {
    setTime(prev => prev + 1);
  }, 1000);

  return (
    <div>
      <p>{time} seconds</p>
    </div>
  );
}
```
```

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

### SwitchCase Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/components/SwitchCase/SwitchCase.md

An example demonstrating how to use the SwitchCase component in a React application.

```APIDOC
## Example Usage

```tsx
function App() {
  // Assume 'status' is a state variable or prop
  const status = 'b'; 

  return (
    <SwitchCase
      value={status}
      // Renders TypeA, TypeB, or TypeC based on the status value.
      caseBy={{
        a: () => <TypeA />,
        b: () => <TypeB />,
        c: () => <TypeC />,
      }}
      // Renders Default when the status value does not match any case.
      defaultComponent={() => <Default />}
    />
  );
}

// Placeholder components for the example
const TypeA = () => <div>Component A</div>;
const TypeB = () => <div>Component B</div>;
const TypeC = () => <div>Component C</div>;
const Default = () => <div>Default Component</div>;

export default App;
```
```

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

### Basic Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useRefEffect/useRefEffect.md

Demonstrates how to use the useRefEffect hook to log when an element is mounted and unmounted.

```APIDOC
## Example Usage

### Description
This example shows how to use `useRefEffect` to get a reference to a `div` element and log messages when it's mounted and unmounted.

### Code
```tsx
import { useRefEffect } from 'react-simplikit';

function Component() {
  const ref = useRefEffect<HTMLDivElement>(element => {
    console.log('Element mounted:', element);

    return () => {
      console.log('Element unmounted:', element);
    };
  }, []);

  return <div ref={ref}>Basic Example</div>;
}
```
```

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

### useLoading Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useLoading/useLoading.md

Example demonstrating how to use the useLoading hook in a React component to manage the loading state of a button click.

```APIDOC
## Example Usage

```tsx
import { useCallback } from 'react';
import { useLoading } from '@toss/react-simplikit'; // Assuming this is the correct import path

// Assume postConfirmation is an async function that returns a Promise
// async function postConfirmation(): Promise<{ id: string }> { ... }

function ConfirmButton() {
  const [loading, startLoading] = useLoading();

  const handleSubmit = useCallback(async () => {
    try {
      // The startLoading function automatically handles setting loading to true/false
      const result = await startLoading(postConfirmation()); 
      // router.push(`/success?id=${result.id}`); // Example navigation
      console.log('Confirmation successful:', result);
    } catch (error) {
      console.error('Error during confirmation:', error);
    }
  }, [startLoading]);

  return (
    <button disabled={loading} onClick={handleSubmit}>
      {loading ? 'Loading...' : 'Confirm'}
    </button>
  );
}
```
```

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

### useAsyncEffect Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useAsyncEffect/useAsyncEffect.md

An example demonstrating how to use the useAsyncEffect hook with an asynchronous operation and a cleanup function.

```APIDOC
## Example

```tsx
useAsyncEffect(async () => {
  const data = await fetchData();
  setData(data);

  return () => {
    console.log('Cleanup on unmount or dependencies change');
  };
}, [dependencies]);
```
```

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

### Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.md

Demonstrates how to use the `useKeyboardHeight` hook in a React component to adjust UI elements based on the keyboard's presence and height.

```APIDOC
## Example

```tsx
function ChatInput() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div style={{ paddingBottom: `${keyboardHeight}px` }}>
      <input type="text" placeholder="Type a message..." />
    </div>
  );
}
```

```tsx
function KeyboardStatus() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div>
      {keyboardHeight > 0
        ? `Keyboard is open (${keyboardHeight}px)`
        : 'Keyboard is closed'}
    </div>
  );
}
```
```

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

### Example Usage of buildContext

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/utils/buildContext/buildContext.md

Demonstrates how to use buildContext to create a context, provide values, and consume them in a component.

```APIDOC
## Example

```tsx
const [Provider, useContext] = buildContext<{ title: string }>
  ('TestContext',
  null
);

function Inner() {
  const { title } = useContext();
  return <div>{title}</div>;
}

function Page() {
  return (
    <Provider title="Hello">
      <Inner />
    </Provider>
  );
}
```
```

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

### Basic Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useGeolocation/useGeolocation.md

Demonstrates the basic usage of the useGeolocation hook to fetch the current location.

```typescript
import { useGeolocation } from '@react-simplikit/core';

function MyComponent() {
  const { loading, error, data, getCurrentPosition } = useGeolocation();

  return (
    <div>
      <button onClick={getCurrentPosition} disabled={loading}>
        {loading ? 'Loading...' : 'Get Location'}
      </button>
      {error && <p>Error: {error.message}</p>}
      {data && (
        <p>
          Latitude: {data.latitude}, Longitude: {data.longitude}
        </p>
      )}
    </div>
  );
}
```

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

### useIsomorphicLayoutEffect Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.md

An example demonstrating how to use the useIsomorphicLayoutEffect hook to perform actions during the layout phase on the client side.

```APIDOC
## Example Usage

```tsx
import { useIsomorphicLayoutEffect } from 'your-package-name';

// Assuming dep1 and dep2 are defined state variables or props
const dep1 = ...;
const dep2 = ...;

useIsomorphicLayoutEffect(() => {
  // Code to be executed during the layout phase on the client side
  console.log('Layout effect ran');

  // Example: Measure DOM elements or apply DOM changes
  const element = document.getElementById('my-element');
  if (element) {
    // Perform measurements or mutations
  }

  return () => {
    // Cleanup function (optional)
    console.log('Layout effect cleanup');
  };
}, [dep1, dep2]); // Dependency array
```
```

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

### useDoubleClick Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useDoubleClick/useDoubleClick.md

An example demonstrating how to use the useDoubleClick hook in a React component.

```APIDOC
## Example Usage

```tsx
import React, { useState } from 'react';
import useDoubleClick from './useDoubleClick'; // Assuming the hook is in this path

function GalleryCard() {
  const [selected, setSelected] = useState(false);

  const handleClick = () => setSelected(prev => !prev);
  const handleDoubleClick = () => alert('Zoom in!');

  const handleEvent = useDoubleClick({
    click: handleClick,
    doubleClick: handleDoubleClick,
  });

  return (
    <div onClick={handleEvent}>{selected ? 'Selected' : 'Not selected'}</div>
  );
}

export default GalleryCard;
```
```

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

### useToggle Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useToggle/useToggle.md

An example demonstrating how to use the useToggle hook in a React component to manage and display a boolean state.

```APIDOC
## Example

```tsx
import { useToggle } from 'react-simplikit';

function Component() {
  const [open, toggle] = useToggle(false);

  return (
    <div>
      <p>Bottom Sheet state: {open ? 'opened' : 'closed'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}
```
```

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

### Example Usage of useNetworkStatus

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md

An example demonstrating how to use the useNetworkStatus hook to conditionally render an image based on network quality and data saver settings.

```APIDOC
## Example Usage

```tsx
import React from 'react';
import { useNetworkStatus } from 'react-simplikit';

function AdaptiveImage() {
  const { effectiveType, saveData } = useNetworkStatus();

  // Determine quality based on your app's needs
  const useHighQuality = effectiveType === '4g' && !saveData;

  return (
    <img src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'} alt="Content" />
  );
}

export default AdaptiveImage;
```
```

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

### useThrottle Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useThrottle/useThrottle.md

An example demonstrating how to use the useThrottle hook with a scroll event listener. It includes setting up the throttled function, adding the event listener, and cleaning up by removing the listener and canceling the throttled function.

```APIDOC
## Example Usage

### Description
This example shows how to use `useThrottle` to create a throttled scroll event handler.

### Code
```tsx
import React, { useEffect } from 'react';
import useThrottle from './useThrottle'; // Assuming useThrottle is in the same directory

function MyComponent() {
  const throttledScroll = useThrottle(
    () => {
      console.log('Scroll event');
    },
    200,
    { edges: ['leading', 'trailing'] }
  );

  useEffect(() => {
    window.addEventListener('scroll', throttledScroll);
    return () => {
      window.removeEventListener('scroll', throttledScroll);
      throttledScroll.cancel();
    };
  }, [throttledScroll]);

  return (
    <div>
      Scroll down to see the console logs.
    </div>
  );
}

export default MyComponent;
```
```

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

### Basic Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.md

Demonstrates how to use the `useVisualViewport` hook in a React component to access and utilize visual viewport information.

```APIDOC
## Example Usage

```tsx
import React from 'react';
import { useVisualViewport } from 'your-package-path'; // Adjust the import path

function CustomLayout() {
  const { viewport } = useVisualViewport();

  // Always check for null first, as the hook may return null on SSR or unsupported browsers
  if (!viewport) {
    return <div>Visual Viewport not supported</div>;
  }

  const { width, height, offsetTop, scale } = viewport;

  // Example: Hide a floating UI element when the user zooms in significantly
  const showFloatingUI = scale <= 1.3;

  return (
    <div style={{ height }}>
      {showFloatingUI && <FloatingButton />}
      Viewport-aware content
    </div>
  );
}

// Assume FloatingButton is a defined component
// const FloatingButton = () => <button>Click Me</button>;

export default CustomLayout;
```
```

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

### JSDoc for Hook Documentation

Source: https://github.com/toss/react-simplikit/blob/main/packages/plugin/skills/react-hook-writing/SKILL.md

Example of documenting a React hook using JSDoc comments, including descriptions, parameters, return values, and usage examples.

```typescript
/**
 * @description [One-line summary]
 * @param {{ value: T; delay: number }} params - Hook parameters
 * @returns {{ value: T }} Debounced value
 * @example
 * const { value } = useDebounce({ value: query, delay: 300 });
 */
```

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

### Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useCounter/useCounter.md

Demonstrates how to use the useCounter hook in a React component to manage a shopping cart quantity with minimum and maximum limits.

```APIDOC
## Example

```tsx
import { useCounter } from 'react-simplikit';

function ShoppingCart() {
  const { count, increment, decrement, reset } = useCounter(1, {
    min: 1,
    max: 10,
  });

  return (
    <div>
      <span>Quantity: {count}</span>
      <button type="button" onClick={decrement}>
        -
      </button>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={reset}>
        Reset
      </button>
    </div>
  );
}
```
```

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

### Basic useAsyncEffect Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useAsyncEffect/useAsyncEffect.md

Handles an asynchronous operation and optionally returns a cleanup function. Re-runs when dependencies change.

```tsx
useAsyncEffect(async () => {
  const data = await fetchData();
  setData(data);

  return () => {
    console.log('Cleanup on unmount or dependencies change');
  };
}, [dependencies]);
```

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

### Basic Timer with useInterval

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useInterval/useInterval.md

This example demonstrates how to use the `useInterval` hook to update a timer every second. Ensure the hook is imported from 'react-simplikit'.

```tsx
import { useInterval } from 'react-simplikit';
import { useState } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useInterval(() => {
    setTime(prev => prev + 1);
  }, 1000);

  return (
    <div>
      <p>{time} seconds</p>
    </div>
  );
}
```

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

### Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useControlledState/useControlledState.md

Demonstrates how to use the useControlledState hook within a React component to manage a boolean toggle state.

```typescript
type ToggleProps = {
  value?: boolean;
  defaultValue?: boolean;
  onChange?: (value: boolean) => void;
};

function Toggle({
  value,
  defaultValue,
  onChange,
}: ToggleProps) {
  const [on, setOn] = useControlledState({
    value,
    defaultValue: defaultValue ?? false,
    onChange,
  });

  return (
    <button onClick={() => setOn(prev => !prev)}>{on ? 'ON' : 'OFF'}</button>
  );
}
```

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

### Basic ImpressionArea Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/components/ImpressionArea/ImpressionArea.md

Demonstrates how to use the ImpressionArea component to log when an element enters or exits the view, with specified time and area thresholds.

```tsx
function App() {
  return (
    <ImpressionArea
      onImpressionStart={() => console.log('Element entered view')}
      onImpressionEnd={() => console.log('Element exited view')}
      timeThreshold={1000}
      areaThreshold={0.5}
    >
      <div>Track me!</div>
    </ImpressionArea>
  );
}
```

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

### Example Usage of useConditionalEffect

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useConditionalEffect/useConditionalEffect.md

Demonstrates how to use the useConditionalEffect hook to conditionally run an effect when a count increases.

```APIDOC
## Example Usage

This example shows how to use `useConditionalEffect` to log a message only when a `count` state variable increases.

```tsx
import { useConditionalEffect } from 'react-simplikit';
import { useState } from 'react';

function Component() {
  const [count, setCount] = useState(0);

  // Only run effect when count increases
  useConditionalEffect(
    () => {
      console.log(`Count increased to ${count}`);
    },
    [count],
    (prevDeps, currentDeps) => {
      // Only run when count is defined and has increased
      // currentDeps[0] is the current value of 'count'
      // prevDeps[0] is the previous value of 'count'
      return prevDeps && currentDeps[0] > prevDeps[0];
    }
  );

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Increment: {count}
    </button>
  );
}
```
```

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

### CodeBlock Component Usage

Source: https://github.com/toss/react-simplikit/blob/main/examples/DEMO_GUIDELINES.md

Shows how to use the CodeBlock component to display code examples. It takes a 'code' prop containing the string to be rendered.

```tsx
const CODE = `function example() {
  return 'hello';
}`;

<CodeBlock code={CODE} />;
```

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

### Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/usePreservedReference/usePreservedReference.md

Demonstrates how to use the usePreservedReference hook in a React component to preserve a state object's reference.

```APIDOC
## Example Usage

```tsx
import { usePreservedReference } from 'react-simplikit';
import { useState } from 'react';

function ExampleComponent() {
  const [state, setState] = useState({ key: 'value' });

  const preservedState = usePreservedReference(state);

  return <div>{preservedState.key}</div>;
}
```
```

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

### useGeolocation with Automatic Fetch on Mount

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useGeolocation/useGeolocation.md

Shows how to configure useGeolocation to automatically fetch the location once when the component mounts by setting the mountBehavior option to 'get'.

```tsx
const { loading, error, data } = useGeolocation({ mountBehavior: 'get' });
```

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

### Display Keyboard Status

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.md

This example shows how to conditionally render text based on whether the keyboard is open and its current height. It utilizes the `keyboardHeight` value returned by the hook.

```tsx
function KeyboardStatus() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div>
      {keyboardHeight > 0
        ? `Keyboard is open (${keyboardHeight}px)`
        : 'Keyboard is closed'}
    </div>
  );
}
```

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

### JSDoc 4-Tag Standard

Source: https://github.com/toss/react-simplikit/blob/main/docs/hook-design-principles.md

Document all public APIs with `@description`, `@param`, `@returns`, and `@example` tags in JSDoc comments. This aids AI documentation generation and provides IDE tooltips.

```typescript
/**
 * @description Delays value updates until after a specified period of inactivity.
 * @param value - The value to debounce
 * @param delay - Delay in milliseconds
 * @returns The debounced value
 * @example
 * const debouncedQuery = useDebounce(query, 300);
 */
```

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

### Build and Test Commands

Source: https://github.com/toss/react-simplikit/blob/main/AGENTS.md

Common commands for building, testing, linting, and type checking the project.

```bash
yarn build
```

```bash
yarn test
```

```bash
yarn fix
```

```bash
yarn typecheck
```

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

### Scaffold New Implementation

Source: https://github.com/toss/react-simplikit/blob/main/docs/core/contributing.md

Use this command to create a new implementation folder with a basic structure, specifying the implementation type and name.

```bash
yarn run scaffold <name> --type <type>
```

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

### useThrottledCallback Example Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useThrottledCallback/useThrottledCallback.md

An example demonstrating how to use the useThrottledCallback hook within a React component to throttle search input.

```APIDOC
## Example Usage

```tsx
function SearchInput() {
  const throttledSearch = useThrottledCallback((query: string) => {
    console.log('Searching for:', query);
  }, 300);

  return <input onChange={e => throttledSearch(e.target.value)} />;
}
```
```

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

### Basic Usage of useList Hook

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useList/useList.md

Demonstrates how to initialize and use the useList hook to manage a list of strings. Includes examples of rendering the list, removing items, adding new items, and resetting the list to its initial state.

```tsx
import { useList } from 'react-simplikit';

function TodoList() {
  const [todos, actions] = useList<string>(['Buy milk', 'Walk the dog']);

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => actions.removeAt(index)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={() => actions.push('New todo')}>Add</button>
      <button onClick={() => actions.reset()}>Reset</button>
    </div>
  );
}
```

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

### File Structure Convention

Source: https://github.com/toss/react-simplikit/blob/main/CLAUDE.md

Illustrates the standard directory structure for hooks, utilities, and components, including co-located documentation and tests.

```tree
src/
├── hooks/
│   └── useHookName/
│       ├── index.ts               # Re-export
│       ├── useHookName.ts         # Implementation
│       ├── useHookName.spec.ts    # Tests (core)
│       ├── useHookName.test.ts    # Tests (mobile)
│       ├── useHookName.ssr.test.ts # SSR safety tests
│       ├── useHookName.md         # English docs
│       └── ko/
│           └── useHookName.md     # Korean docs
├── utils/
│   └── utilName/
│       ├── index.ts
│       ├── utilName.ts
│       └── utilName.test.ts
└── index.ts                       # Public API exports (alphabetically sorted)

```

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

### useOutsideClickEffect Usage Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useOutsideClickEffect/useOutsideClickEffect.md

An example demonstrating how to use the useOutsideClickEffect hook to log a message when a click occurs outside a specific div element.

```APIDOC
## Example Usage

```tsx
import { useOutsideClickEffect } from 'react-simplikit';
import { useState } from 'react';

function Example() {
  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);

  useOutsideClickEffect(wrapperEl, () => {
    console.log('Outside clicked!');
  });

  return <div ref={setWrapperEl}>Content</div>;
}
```
```

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

### Build and Test Commands

Source: https://github.com/toss/react-simplikit/blob/main/CLAUDE.md

Common commands for building, testing, linting, and managing changesets in the monorepo.

```bash
yarn build          # Build all packages (tsup)

```

```bash
yarn test           # Run tests (Vitest)

```

```bash
yarn fix            # Auto-fix lint + format (ESLint + Prettier)

```

```bash
yarn typecheck      # Type check (tsc --noEmit) - alias: yarn run test:type

```

```bash
yarn changeset      # Create a changeset

```

```bash
yarn changeset status  # Check pending changesets

```

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

### Scaffold a New Component

Source: https://github.com/toss/react-simplikit/blob/main/docs/core/contributing.md

Use this command to generate the basic file structure for a new component. It creates necessary files like the component itself, its test file, and an index file for exports.

```bash
yarn run scaffold Button --type component
```

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

### SSR Safety Test Example in Jest

Source: https://github.com/toss/react-simplikit/blob/main/docs/mobile/design-principles.md

This example demonstrates how to test if a hook is safe during server-side rendering using a testing utility. It ensures the hook's current value is defined on the server.

```typescript
it('is safe on server side rendering', () => {
  const result = renderHookSSR.serverOnly(() => useHook());
  expect(result.current).toBeDefined();
});
```

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

### Scaffolding Shortcuts

Source: https://github.com/toss/react-simplikit/blob/main/docs/core/contributing.md

Provides shorthand commands for scaffolding different types of project elements like components, hooks, and utilities.

```bash
yarn run scaffold Button --t c // Create component
```

```bash
yarn run scaffold useButton --t h // Create hook
```

```bash
yarn run scaffold getButton --t u // Create util
```

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

### Detecting Zoom Level

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.md

An example showing how to specifically detect and react to changes in the zoom level of the visual viewport.

```APIDOC
## Detecting Zoom

```tsx
import React, { useState } from 'react';
import { useVisualViewport } from 'your-package-path'; // Adjust the import path

function ZoomAwareComponent() {
  const { viewport } = useVisualViewport();
  const [showFloatingButton, setShowFloatingButton] = useState(true);

  if (viewport && viewport.scale > 1.3) {
    // Hide floating UI when user zooms in
    if (showFloatingButton) {
      setShowFloatingButton(false);
    }
  } else {
    // Show floating UI if not zoomed in or if viewport is null
    if (!showFloatingButton) {
      setShowFloatingButton(true);
    }
  }

  return (
    <div>
      {showFloatingButton && <FloatingButton />}
      {/* Other content */}
    </div>
  );
}

// Assume FloatingButton is a defined component
// const FloatingButton = () => <button>Floating Action</button>;

export default ZoomAwareComponent;
```
```

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

### Basic Usage of useSafeAreaInset

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useSafeAreaInset/useSafeAreaInset.md

Demonstrates how to use the useSafeAreaInset hook to apply padding to a div, ensuring content respects the device's safe areas.

```tsx
function SafeLayout() {
  const safeArea = useSafeAreaInset();

  return (
    <div
      style={{
        paddingTop: safeArea.top,
        paddingBottom: safeArea.bottom,
        paddingLeft: safeArea.left,
        paddingRight: safeArea.right,
      }}
    >
      Content that respects safe areas
    </div>
  );
}
```

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

### Basic useToggle Usage

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useToggle/useToggle.md

Demonstrates how to initialize and use the useToggle hook to manage a boolean state and toggle it with a button click.

```tsx
import { useToggle } from 'react-simplikit';

function Component() {
  const [open, toggle] = useToggle(false);

  return (
    <div>
      <p>Bottom Sheet state: {open ? 'opened' : 'closed'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}
```

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

### Basic Counter with Range Constraints

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useCounter/useCounter.md

Demonstrates how to use the useCounter hook with an initial value and options to set minimum and maximum bounds. Includes functions to increment, decrement, and reset the counter.

```tsx
import { useCounter } from 'react-simplikit';

function ShoppingCart() {
  const { count, increment, decrement, reset } = useCounter(1, {
    min: 1,
    max: 10,
  });

  return (
    <div>
      <span>Quantity: {count}</span>
      <button type="button" onClick={decrement}>
        -
      </button>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={reset}>
        Reset
      </button>
    </div>
  );
}
```

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

### SSR Testing Pattern

Source: https://github.com/toss/react-simplikit/blob/main/CLAUDE.md

Example of how to test hooks for Server-Side Rendering safety using a dedicated SSR rendering utility.

```typescript
import { renderHookSSR } from '../utils/renderHookSSR';
it('is safe on server side rendering', () => {
  const result = renderHookSSR.serverOnly(() => useHookName());
  expect(result.current).toBeDefined();
});

```

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

### Get Network Status

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md

Hook to retrieve network status. Returns an object with connection quality and data saver preference.

```typescript
function useNetworkStatus(): NetworkStatus;
```

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

### Move Fixed Elements Above Keyboard with `useAvoidKeyboard`

Source: https://context7.com/toss/react-simplikit/llms.txt

Returns a `style` object (with `transform` and `transition`) to apply to `position: fixed` bottom elements so they slide above the keyboard smoothly. Configuration options include `safeAreaBottom` and `transitionDuration`.

```tsx
import { useAvoidKeyboard } from '@react-simplikit/mobile';

function FixedBottomCTA() {
  const { style } = useAvoidKeyboard({
    safeAreaBottom: 34,         // iPhone home indicator
    transitionDuration: 250,
    transitionTimingFunction: 'ease-in-out',
  });

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        padding: '16px',
        background: '#fff',
        ...style, // { transform: 'translateY(-Xpx)', transition: '...' }
      }}
    >
      <button style={{ width: '100%' }}>Confirm Order</button>
    </div>
  );
}

```

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

### useLongPress Hook Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useLongPress/useLongPress.md

Demonstrates how to use the useLongPress hook in a React component to implement a context menu that appears after a long press.

```tsx
import { useLongPress } from 'react-simplikit';

function ContextMenu() {
  const [menuVisible, setMenuVisible] = useState(false);

  const longPressHandlers = useLongPress(() => setMenuVisible(true), {
    delay: 400,
    onClick: () => console.log('Normal click'),
    onLongPressEnd: () => console.log('Long press completed'),
  });

  return (
    <div>
      <button {...longPressHandlers}>Press and hold</button>
      {menuVisible && <div className="context-menu">Context Menu</div>}
    </div>
  );
}
```

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

### Demo Page Structure with useMyHook

Source: https://github.com/toss/react-simplikit/blob/main/examples/DEMO_GUIDELINES.md

Demonstrates the standard structure for a demo page, including hook usage, status display, interactive demo area, and code implementation display.

```tsx
import {
  Button,
  Card,
  CodeBlock,
  InfoBox,
  StatusCard,
  StatusRow,
} from '@examples/shared';
import { useMyHook } from '@react-simplikit/mobile';
import { DemoLayout } from '../../components/DemoLayout';

// 1. Code example constants (separated at top)
const EXAMPLE_CODE = `import { useMyHook } from '@react-simplikit/mobile';
...`;

export function MyHookDemo() {
  // 2. Core hook usage (clearly at top)
  const { value } = useMyHook();

  return (
    <DemoLayout title="useMyHook" description="Hook description">
      {/* 3. Status display */}
      <StatusCard title="State" description="Real-time state">
        <StatusRow label="Value" value={value} monospace />
      </StatusCard>

      {/* 4. Demo area */}
      <Card title="Demo">
        <InfoBox variant="info">
          <strong>Key Pattern:</strong> Core pattern explanation
        </InfoBox>
        {/* Interactive demo */}
      </Card>

      {/* 5. Code example */}
      <Card title="Implementation Code">
        <CodeBlock code={EXAMPLE_CODE} />
      </Card>
    </DemoLayout>
  );
}
```

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

### Plugin Directory Structure

Source: https://github.com/toss/react-simplikit/blob/main/docs/hook-design-principles.md

Defines the planned directory structure for the hook plugin package, including shared principles and skill-specific guides.

```text
packages/plugin/  (planned)
├── .claude-plugin/plugin.json
├── .codex-plugin/plugin.json
├── principles/                      ← Shared principles single source
├── skills/
│   ├── react-hook-review/SKILL.md   ← C1-C14 + U1-U17 checklist
│   └── react-hook-writing/
│       ├── SKILL.md                 ← Themed guide
│       └── references/patterns.md   ← 3 hook implementations
└── README.md
```

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

### Rotation-Aware Header with useSafeAreaInset

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useSafeAreaInset/useSafeAreaInset.md

Shows how to use the hook to create a header that dynamically adjusts its padding based on screen orientation and safe area insets.

```tsx
// Automatically updates when screen rotates
function RotationAwareHeader() {
  const { top, left, right } = useSafeAreaInset();

  return (
    <header
      style={{
        paddingTop: top,
        paddingLeft: left,
        paddingRight: right,
      }}
    >
      Header content
    </header>
  );
}
```

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

### Basic Usage of useInputState Hook

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useInputState/useInputState.md

Demonstrates how to use the useInputState hook to manage a text input's value and handle changes.

```tsx
function Example() {
  const [value, onChange] = useInputState('');
  return <input type="text" value={value} onChange={onChange} />;
}
```

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

### useLoading Hook Signature

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useLoading/useLoading.md

The useLoading hook returns a tuple containing the current loading state and a function to start and manage asynchronous operations.

```APIDOC
## useLoading

### Description
A React hook that simplifies managing the loading state of a Promise. It provides a state to track whether an asynchronous operation is in progress and a function to handle the loading state automatically.

### Interface
```ts
function useLoading(): [loading: boolean, startLoading: <T>(promise: Promise<T>) => Promise<T>];
```

### Return Value
- **loading** (boolean): Represents the current loading state. Initial value is `false`. Set to `true` when an asynchronous task is in progress.
- **startLoading** (<T>(promise: Promise<T>) => Promise<T>): A function that executes asynchronous tasks while managing the loading state. It takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes.
```

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

### Continuous Location Tracking

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useGeolocation/useGeolocation.md

Illustrates how to use the useGeolocation hook for continuous location tracking, including starting, stopping, and checking the tracking status.

```typescript
import { useGeolocation } from '@react-simplikit/core';

function LocationTracker() {
  const {
    loading,
    error,
    data,
    startTracking,
    stopTracking,
    isTracking,
  } = useGeolocation();

  return (
    <div>
      <button onClick={startTracking} disabled={isTracking || loading}>
        Start Tracking
      </button>
      <button onClick={stopTracking} disabled={!isTracking}>
        Stop Tracking
      </button>
      <p>Tracking status: {isTracking ? 'Active' : 'Inactive'}</p>
      {loading && <p>Updating location...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && (
        <p>
          Last known location: Lat {data.latitude}, Lon {data.longitude}
        </p>
      )}
    </div>
  );
}
```

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

### Detecting Zoom with useVisualViewport

Source: https://github.com/toss/react-simplikit/blob/main/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.md

Check the scale property of the viewport to detect zoom levels. This example shows how to hide UI elements when the user zooms in.

```tsx
const { viewport } = useVisualViewport();
if (viewport && viewport.scale > 1.3) {
  // Hide floating UI when user zooms in
  setShowFloatingButton(false);
}
```

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

### useKeyboardHeight

Source: https://context7.com/toss/react-simplikit/llms.txt

Tracks the on-screen keyboard height in pixels using the Visual Viewport API. Updates automatically as the keyboard appears, resizes, or is dismissed.

```APIDOC
## useKeyboardHeight

### Description
Tracks the on-screen keyboard height in pixels via the Visual Viewport API. Updates automatically as the keyboard appears, resizes, or is dismissed.

### Returns
- `keyboardHeight` (number): The current keyboard height in pixels. Returns 0 when the keyboard is hidden.

### Usage
```tsx
import { useKeyboardHeight } from '@react-simplikit/mobile';

function ChatInput() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        paddingBottom: `${keyboardHeight}px`,
        transition: 'padding-bottom 200ms ease-out',
      }}
    >
      <input type="text" placeholder="Type a message..." />
    </div>
  );
}
```
```

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

### Basic useTimeout Example

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useTimeout/useTimeout.md

Demonstrates how to use the useTimeout hook to update a component's state after specific delays. Ensure the hook is imported from 'react-simplikit'.

```tsx
import { useTimeout } from 'react-simplikit';
import { useState } from 'react';

function Example() {
  const [title, setTitle] = useState('');

  useTimeout(() => {
    setTitle('Searching for products...');
  }, 2000);

  useTimeout(() => {
    setTitle('Almost done...');
  }, 4000);

  return <div>{title}</div>;
}
```

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

### Initializing and Using useMap Hook

Source: https://github.com/toss/react-simplikit/blob/main/packages/core/src/hooks/useMap/useMap.md

Initialize the useMap hook with an array of key-value pairs. Access Map values using .get() and update the Map using the provided actions.

```tsx
const [userMap, actions] = useMap<string, User>([
  ['user1', { name: 'John', age: 30 }],
]);

// Using values from the Map
const user1 = userMap.get('user1');

// Updating the Map
actions.set('user2', { name: 'Jane', age: 25 });
```