React Simplikit

https://github.com/toss/react-simplikit
Admin
React Simplikit is a lightweight, dependency-free library offering reliable utilities for React...
Tokens:62,656
Snippets:749
Trust Score:9.2
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install react-simplikit

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

Commands to install the library using npm, yarn, or pnpm.

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

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

### Install react-simplikit

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

Use npm to install the react-simplikit package in your project.

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

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

### Scaffold Button component example

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

Example command to create a Button component structure.

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

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

### Install react-simplikit via package managers

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

Commands to install the package using npm, pnpm, yarn, or bun.

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

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

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

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

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

### Install react-simplikit plugin for Codex

Source: https://github.com/toss/react-simplikit/blob/main/docs/ai-integration.md

Add the plugin from the marketplace and complete the installation via the plugin UI.

```sh
codex plugin marketplace add https://github.com/toss/react-simplikit
# then install "react-simplikit" from the plugin UI
```

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

### subscribeKeyboardHeight Usage Example

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

Example showing how to subscribe to keyboard height changes and clean up the subscription.

```tsx
const { unsubscribe } = subscribeKeyboardHeight({
  callback: height => {
    footer.style.paddingBottom = `${height}px`;
  },
  immediate: true,
});

// Later, when cleanup is needed
unsubscribe();
```

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

### Install react-simplikit plugin for Claude Code

Source: https://github.com/toss/react-simplikit/blob/main/docs/ai-integration.md

Add the plugin from the marketplace and install it using the Claude CLI.

```sh
claude plugin marketplace add https://github.com/toss/react-simplikit --sparse .claude-plugin packages/plugin
claude plugin install react-simplikit@react-simplikit
```

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

### Install plugin for Claude Code

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

Add the marketplace and install the plugin specifically for Claude Code.

```bash
# 1. Add this plugin's marketplace (sparse-checkout keeps the clone minimal)
claude plugin marketplace add https://github.com/toss/react-simplikit \
  --sparse .claude-plugin packages/plugin

# 2. Install the plugin
claude plugin install react-simplikit@react-simplikit
```

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

### useIsClient Usage Examples

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

Examples demonstrating how to use useIsClient for conditional rendering, client-only components, and accessing browser-specific APIs like localStorage.

```tsx
function ClientSideContent() {
  const isClient = useIsClient();

  if (!isClient) {
    return <div>Loading...</div>; // Rendered on the server side
  }

  return <div>Client-side rendered content</div>; // Rendered on the client side
}

function ClientOnlyMap() {
  const isClient = useIsClient();

  if (!isClient) return null;

  return <div id="map" />;
}

function ClientTheme() {
  const isClient = useIsClient();

  const theme = isClient ? localStorage.getItem('theme') : 'light';

  return <div>Current theme: {theme}</div>;
}
```

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

### useCallbackOncePerRender Usage Examples

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

Examples demonstrating basic usage with a button click and usage with dependencies for tracking user visits.

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

function Component() {
  const handleOneTimeEvent = useCallbackOncePerRender(() => {
    console.log('This will only run once');
  }, []);

  return <button onClick={handleOneTimeEvent}>Click me</button>;
}

// With dependencies
function TrackingComponent({ userId }: { userId: string }) {
  const trackUserVisit = useCallbackOncePerRender(() => {
    analytics.trackVisit(userId);
  }, [userId]);

  useEffect(() => {
    trackUserVisit();
  }, [trackUserVisit]);

  return <div>User page</div>;
}
```

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

### useGeolocation Usage Examples

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

Examples demonstrating basic usage, automatic fetching on mount, and manual location tracking control.

```tsx
// Basic usage
const { loading, error, data, getCurrentPosition } = useGeolocation();

// Automatically fetch location when component mounts
const { loading, error, data } = useGeolocation({ mountBehavior: 'get' });

// Location tracking
const { loading, error, data, startTracking, stopTracking, isTracking } =
  useGeolocation();

const handleStartTracking = () => {
  startTracking();
};

const handleStopTracking = () => {
  stopTracking();
};
```

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

### useSafeAreaInset Usage Examples

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

Examples showing how to use the hook to apply safe area padding to components, including automatic updates during screen rotation.

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

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

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

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

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

### useLoading Usage Example

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

A component example demonstrating how to use the loading state and startLoading function to handle an asynchronous form submission.

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

  const handleSubmit = useCallback(async () => {
    try {
      const result = await startLoading(postConfirmation());
      router.push(`/success?id=${result.id}`);
    } catch (error) {
      console.error('Error:', error);
    }
  }, [startLoading]);

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

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

### Development Quick Start Commands

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

Commonly used CLI commands for building, testing, and maintaining the project.

```bash
yarn build          # Build all packages (tsdown)
yarn test           # Run tests (Vitest)
yarn fix            # Auto-fix lint + format (ESLint + Prettier)
yarn typecheck      # Type check (tsc --noEmit) - alias: yarn run test:type
yarn changeset      # Create a changeset
yarn changeset status  # Check pending changesets
```

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

### mergeRefs Usage Examples

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

Examples demonstrating how to use mergeRefs with forwardRef and with multiple local refs.

```tsx
forwardRef(function Component(props, parentRef) {
  const myRef = useRef(null);

  return <div ref={mergeRefs(myRef, parentRef)} />;
});

function Component(props) {
  const ref = useRef(null);
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node == null) {
      return;
    }

    setHeight(node.offsetHeight);
  }, []);

  return <div ref={mergeRefs(measuredRef, ref)} />;
}
```

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

### getKeyboardHeight Usage Example

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

An example demonstrating how to retrieve the keyboard height and apply it as padding to a footer element when the keyboard is visible.

```tsx
const height = getKeyboardHeight();

if (height > 0) {
  footer.style.paddingBottom = `${height}px`;
}
```

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

### Usage examples for usePageVisibility

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

Examples demonstrating how to pause a video when the page is hidden and how to track analytics when the visibility state changes.

```tsx
function VideoPlayer() {
  const { isVisible } = usePageVisibility();
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!videoRef.current) return;

    // Pause video when tab is hidden
    if (!isVisible) {
      videoRef.current.pause();
    }
  }, [isVisible]);

  return <video ref={videoRef} src="video.mp4" />;
}

function Analytics() {
  const { isVisible, visibilityState } = usePageVisibility();

  useEffect(() => {
    if (visibilityState === 'hidden') {
      // Track when user leaves the page
      analytics.track('page_hidden');
    }
  }, [visibilityState]);

  return null;
}
```

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

### Usage examples for isIOS

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

Demonstrates basic usage for the current environment and how to check a custom user agent string.

```tsx
if (isIOS()) {
  // iOS-specific code
  enableIOSOptimizations();
}

// With custom user agent
const isIOSDevice = isIOS(
  'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)'
);
```

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

### Usage example for getSafeAreaInset

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

Example showing how to destructure the returned safe area insets and apply them to DOM element styles.

```tsx
const { top, bottom, left, right } = getSafeAreaInset();

header.style.paddingTop = `${top}px`;
footer.style.paddingBottom = `${bottom}px`;
```

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

### useMap Usage Example

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

Demonstrates initializing a Map state and using the returned actions to retrieve and update values.

```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 });
```

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

### FixedBottomCTA Component Example

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

Basic usage of useAvoidKeyboard to position a fixed bottom element, and an example using the safeAreaBottom option for devices like the iPhone.

```tsx
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard();

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Submit</button>
    </div>
  );
}

// With safe area bottom offset (e.g., for iPhone home indicator)
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Submit</button>
    </div>
  );
}
```

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

### useDebounce Usage Example

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

A React component example demonstrating how to use useDebounce to delay an API call during input changes.

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

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

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

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

### isAndroid Usage Examples

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

Demonstrates using isAndroid with the default user agent and with a custom user agent string.

```tsx
if (isAndroid()) {
  // Android-specific code
  enableAndroidOptimizations();
}

// With custom user agent
const isAndroidDevice = isAndroid(
  'Mozilla/5.0 (Linux; Android 12; Pixel 6) Chrome/120'
);
```

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

### useAvoidKeyboard Example

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

Basic usage of the hook to apply keyboard avoidance styles to a fixed-bottom element.

```tsx
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard();

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Submit</button>
    </div>
  );
}
```

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

### useInputState Usage Example

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

A basic implementation showing how to use the hook with both input and textarea elements.

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

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

### usePrevious Usage Example

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

A basic implementation showing how to track the previous value of a count state.

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

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

### useList usage example

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

Demonstrates how to initialize the useList hook and utilize its various action functions to manipulate the array state.

```tsx
const [list, actions] = useList<string>(['apple', 'banana']);

// Add an item
actions.push('cherry');

// Insert at index
actions.insertAt(1, 'grape');

// Update at index
actions.updateAt(0, 'orange');

// Remove at index
actions.removeAt(2);

// Replace all
actions.setAll(['kiwi', 'mango']);

// Reset to initial state
actions.reset();
```

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

### useConditionalEffect usage example

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

A component example demonstrating how to use useConditionalEffect to trigger a log only when the count state increases.

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

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
      return prevDeps && currentDeps[0] > prevDeps[0];
    }
  );

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

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

### Separated Usage Example

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

An example showing how to use the Separated component to insert a Border component between list items.

```tsx
function App() {
  return (
    <Separated by={<Border type="padding24" />}>
      {['hello', 'react', 'world'].map(item => (
        <div key={item}>{item}</div>
      ))}
    </Separated>
  );
  // Expected output:
  // <div>hello</div>
  // <Border type="padding24" />
  // <div>react</div>
  // <Border type="padding24" />
  // <div>world</div>
}
```

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

### Usage example for isKeyboardVisible

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

Demonstrates how to use isKeyboardVisible to perform conditional logic or UI updates based on the keyboard state.

```tsx
if (isKeyboardVisible()) {
  console.log('Keyboard is open');
} else {
  console.log('Keyboard is closed');
}

// Conditionally show/hide elements based on keyboard visibility
const showFloatingButton = !isKeyboardVisible();
```

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

### Import hooks from react-simplikit

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

Example of importing a hook from the package. Hooks are tree-shakeable.

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

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

### Usage example of buildContext

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

Demonstrates how to initialize a context using buildContext and consume it within a component tree using the returned Provider and hook.

```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>
  );
}
```

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

### Usage example for useVisibilityEvent

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

A basic implementation showing how to log the document visibility state changes to the console.

```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>;
}
```

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

### useKeyboardHeight Usage Example

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

A basic implementation of the hook within a component to adjust padding based on the keyboard height.

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

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

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

### useThrottle Usage Example

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

An example of using useThrottle to limit scroll event logging, including cleanup in a useEffect hook.

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

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

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

### useDebouncedValue search input example

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

A practical example showing how to use useDebouncedValue to debounce a search query input with a 300ms delay.

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

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

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={debouncedQuery} />
    </>
  );
}
```

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

### useCounter Shopping Cart Example

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

A practical implementation of a shopping cart quantity selector using useCounter with defined minimum and maximum bounds.

```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>
  );
}
```

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

### CodeBlock Component

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

Displays code examples within a demo page.

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

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

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

### useDoubleClick Usage Example

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

An example showing how to use the hook within a component to toggle selection on a single click and trigger an alert on a double click.

```tsx
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>
  );
}
```

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

### useImpressionRef Usage Example

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

An example showing how to attach the ref returned by useImpressionRef to a DOM element to track its visibility with specific thresholds.

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

function Component() {
  const ref = useImpressionRef<HTMLDivElement>({
    onImpressionStart: () => console.log('Element entered view'),
    onImpressionEnd: () => console.log('Element exited view'),
    timeThreshold: 1000,
    areaThreshold: 0.5,
  });

  return <div ref={ref}>Track my visibility!</div>;
}
```

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

### isServer Usage Example

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

Demonstrates using isServer to conditionally execute code, ensuring SSR-safe logic runs on the server and client-only logic runs in the browser.

```tsx
if (isServer()) {
  // SSR-safe code
  return null;
}

// Client-only code
window.addEventListener('resize', handleResize);
```

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

### useOutsideClickEffect Usage Example

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

A basic implementation showing how to use the hook with a ref to track a container element.

```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>;
}
```

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

### Basic usage of usePreservedReference

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

An example showing the default behavior of usePreservedReference using JSON.stringify for comparison.

```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>;
}
```

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

### SwitchCase Usage Example

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

A basic implementation showing how to use SwitchCase to render different components based on a status value.

```tsx
function App() {
  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 />}
    />
  );
}
```

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

### After: Logic Clearly Visible

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

The refactored version of the previous example using StatusRow to make logic immediately visible.

```tsx
// 164 lines, core logic is immediately visible
<StatusRow
  label="Modal 1"
  value={showModal1 ? 'Open' : 'Closed'}
  variant={showModal1 ? 'success' : 'muted'}
/>
```

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

### usePreservedCallback usage example

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

A practical example showing how to use usePreservedCallback in a Counter component to maintain a stable click handler that accesses the current count state.

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

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

  const handleClick = usePreservedCallback(() => {
    console.log(`Current count: ${count}`);
    setCount(prev => prev + 1);
  });

  return <button onClick={handleClick}>Click me</button>;
}
```

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

### Usage example of useDebouncedCallback

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

A component demonstrating how to debounce an input change handler with a 300ms threshold.

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

function SearchInput() {
  const [query, setQuery] = useState('');
  const setQueryDebounced = useDebouncedCallback({
    onChange: setQuery,
    timeThreshold: 300,
  });

  return (
    <>
      <input onChange={e => setQueryDebounced(e.target.value)} />
      <p>Searching for: {query}</p>
    </>
  );
}
```

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

### useVisualViewport usage example

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

A component demonstrating how to safely access viewport properties and handle UI logic based on scale and height.

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

  // Always check for null first
  if (!viewport) {
    return <div>Visual Viewport not supported</div>;
  }

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

  // Hide floating UI when user zooms in
  const showFloatingUI = scale <= 1.3;

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

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

### useIntersectionObserver Usage Example

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

A basic implementation showing how to attach the observer ref to a div and handle visibility changes via the callback.

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

function Component() {
  const ref = useIntersectionObserver<HTMLDivElement>(
    entry => {
      if (entry.isIntersecting) {
        console.log('Element is in view:', entry.target);
      } else {
        console.log('Element is out of view:', entry.target);
      }
    },
    { threshold: 0.5 }
  );

  return <div ref={ref}>Observe me!</div>;
}
```

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

### Custom equality check with usePreservedReference

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

An example demonstrating how to provide a custom equality function to usePreservedReference.

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

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

  const preservedState = usePreservedReference(
    state,
    (a, b) => a.key === b.key
  );

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

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

### JSON output structure

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

Example of the JSON object written to stdout when using the --json flag.

```json
{
  "transform": "mobile-to-root",
  "dryRun": false,
  "scanned": 128,
  "changed": [
    {
      "kind": "source",
      "file": "src/a.tsx",
      "changes": [{ "line": 3, "kind": "import" }]
    },
    {
      "kind": "manifest",
      "file": "package.json",
      "dependencies": [
        {
          "field": "dependencies",
          "removed": "@react-simplikit/mobile",
          "added": "^0.2.0"
        }
      ]
    }
  ],
  "manual": [
    {
      "file": "src/a.tsx",
      "line": 4,
      "reason": "Left on its own line: `isIOS` already refers to a different import here..."
    },
    {
      "file": "package.json",
      "reason": "\"overrides\" still pins @react-simplikit/mobile..."
    }
  ],
  "failed": []
}
```

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

### useBooleanState Usage Example

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

A basic implementation of useBooleanState to manage the open/closed state of a bottom sheet component.

```tsx
const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] =
  useBooleanState(false);
```

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

### Implement AutoCompleteInput with React Simplikit

Source: https://github.com/toss/react-simplikit/blob/main/docs/why-react-simplikit-matters.md

This example demonstrates using hooks like useLoading, useBooleanState, and useDebounce alongside the SwitchCase component to manage search input states declaratively.

```tsx
function AutoCompleteInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [isLoading, startLoading] = useLoading();
  const [isOpen, openSearchBox, closeSearchBox] = useBooleanState(false);

  const searchBoxState = useMemo(() => {
    if (!isOpen) return 'CLOSE';

    if (isLoading) return 'LOADING';

    if (results.length > 0) return 'RESULT_EXISTS';

    return 'EMPTY';
  }, [isOpen, isLoading, results]);

  const searchResults = useDebounce(async (searchQuery: string) => {
    if (searchQuery.trim().length === 0) {
      setResults([]);
      return;
    }

    const response = await startLoading(
      fetch(`/api/search?q=${searchQuery}`)
        .then(res => res.json())
        .catch(error => {
          console.error('Failed to fetch results:', error);
          return [];
        })
    );

    setResults(response);
  }, 300);

  const containerRef = useRef<HTMLDivElement>(null);
  useOutsideClickEffect(containerRef.current, () => closeSearchBox());

  return (
    <div ref={containerRef} className="relative">
      <input
        type="text"
        value={query}
        onChange={e => {
          setQuery(e.target.value);
          openSearchBox();
          searchResults(e.target.value);
        }}
        onFocus={openSearchBox}
        placeholder="Enter search term"
      />
      <SwitchCase
        value={searchBoxState}
        caseBy={{
          LOADING: () => <div>Searching...</div>,
          EMPTY: () => <div>No results found.</div>,
          RESULT_EXISTS: () => (
            <Separated by={<Divider />}>
              {results.map(result => (
                <Fragment key={result.id}>
                  <div
                    onClick={() => {
                      setQuery(result.title);
                      closeSearchBox();
                    }}
                  >
                    {result.title}
                  </div>
                </Fragment>
              ))}
            </Separated>
          ),
          CLOSE: () => null,
        }}
      />
    </div>
  );
}
```

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

### JSDoc Parameter Documentation Example

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

Demonstrates the required JSDoc format for complex object parameters, including optional fields and nested properties.

```ts
type Props = {
  name: string;
  age: number;
  nickname?: string;
  company: {
    name: string;
    address?: string;
  };
  paymentMethod?: {
    type: 'card' | 'account';
    number?: string;
  };
};

/**
 * @param {string} name - Name of the user.
 * @param {number} age - Age of the user.
 * @param {string} [nickname] - Nickname of the user.
 * @param {Object} company - Company information of the user.
 * @param {string} company.name - Name of the company.
 * @param {string} [company.address] - Address of the company.
 * @param {Object} [paymentMethod] - Payment information of the user.
 * @param {string} [paymentMethod.type] - Payment method.
 * @param {string} [paymentMethod.number] - Card or account number.
 *   -- Card or account number without `-`.
 *   -- If the number is a card number, it should be 15 or 16 digits.
 */
```

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

### Usage example of useIsomorphicLayoutEffect

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

A basic implementation showing how to call the hook with an effect function and a dependency array.

```tsx
useIsomorphicLayoutEffect(() => {
  // Code to be executed during the layout phase on the client side
}, [dep1, dep2, ...]);
```

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

### ImpressionArea Usage Example

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

A basic implementation showing how to use ImpressionArea to log visibility events with specific 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>
  );
}
```

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

### Before: Styling Obscuring Logic

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

An example of code where core logic is buried in inline styles, which should be avoided.

```tsx
// 220 lines, core logic buried in styles
<div
  style={{ display: 'flex', justifyContent: 'space-between', fontSize: '14px' }}
>
  <span style={{ fontWeight: 500 }}>Modal 1:</span>
  <span style={{ color: showModal1 ? '#16a34a' : '#9ca3af' }}>
    {showModal1 ? 'Open' : 'Closed'}
  </span>
</div>
```

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

### useInterval usage example

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

A basic implementation of a timer using useInterval to increment a state value every 1000 milliseconds.

```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>
  );
}
```

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

### Adaptive image and video player usage

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

Examples demonstrating how to use network status properties to conditionally render high-resolution images or control video autoplay behavior.

```tsx
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" />
  );
}

function VideoPlayer() {
  const { type, downlink } = useNetworkStatus();

  // Custom logic: only autoplay on wifi with good bandwidth
  const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5;

  return <video src="video.mp4" autoPlay={shouldAutoplay} />;
}
```

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

### Updating a title after a delay

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

An example demonstrating how to use useTimeout to update state after specific time intervals.

```tsx
// Updating a title after a delay
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>;
}
```

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

### useAsyncEffect Usage Example

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

A basic implementation showing an async data fetch and a cleanup function returned for unmounting or dependency changes.

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

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

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

### useToggle Usage Example

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

A basic implementation of useToggle within a React component to manage the open/closed state of a UI element.

```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>
  );
}
```

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

### useSet Tag Selector Example

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

A component demonstrating how to use the useSet hook to manage a collection of selected tags with toggle functionality.

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

function TagSelector() {
  const [selectedTags, { add, remove, toggle }] = useSet<string>(['react']);

  return (
    <div>
      {['react', 'vue', 'svelte'].map(tag => (
        <button key={tag} onClick={() => toggle(tag)}>
          {selectedTags.has(tag) ? '✓' : ''} {tag}
        </button>
      ))}
    </div>
  );
}
```

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

### useLongPress Usage Example

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

A component demonstrating how to attach long press handlers to a button and handle optional click and end events.

```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>
  );
}
```

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

### Document Tuple Return Values

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

Example of documenting a tuple return value in TypeScript and its corresponding Interface component representation.

```ts
type ReturnValue = [Object, () => void];

/**
 * @returns {[Object, () => void]} A tuple containing:
 * - obj `Object` - An object containing:
 *   : label `string` - The label of the input.
 *   : value `string` - The value of the input.
 * - onChange `() => void` - A function to update the value.
 */
```

```html
<div class='codeblock'>
  <Interface
    name=""
    type="[obj: Object, onChange: () => void]"
    description="A tuple containing:"
    :nested="[
      {
        name: 'obj',
        type: 'Object',
        description: 'An object containing: <br />  : label <code>string</code> - The label of the input. <br />  : value <code>string</code> - The value of the input.',
      },
      {
        name: 'onChange',
        type: '() => void',
        description: 'A function to update the value.',
      },
    ]"
  />
</div>
```

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

### Implement AutoCompleteInput without react-simplikit

Source: https://github.com/toss/react-simplikit/blob/main/docs/why-react-simplikit-matters.md

This example demonstrates the complexity of managing multiple states, side effects, and event listeners manually in a standard React component.

```tsx
function AutoCompleteInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [isLoading, setLoading] = useState(false);
  const [isOpen, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(e.target as Node)
      ) {
        setOpen(false);
      }
    };

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  useEffect(() => {
    if (query.trim().length === 0) {
      setResults([]);
      return;
    }

    setLoading(true);
    const timeoutId = setTimeout(async () => {
      try {
        const response = await fetch(`/api/search?q=${query}`);
        const data = await response.json();
        setResults(data);
      } catch (error) {
        console.error('Failed to fetch results:', error);
      } finally {
        setLoading(false);
      }
    }, 300);

    return () => clearTimeout(timeoutId);
  }, [query]);

  return (
    <div ref={containerRef} className="relative">
      <input
        type="text"
        value={query}
        onChange={e => {
          setQuery(e.target.value);
          setOpen(true);
        }}
        onFocus={() => setOpen(true)}
        placeholder="Enter search term"
      />
      {isOpen && (isLoading || results.length > 0) && (
        <div>
          {isLoading ? (
            <div className="p-2">Searching...</div>
          ) : (
            results.map((result, idx) => (
              <Fragment key={result.id}>
                <div
                  onClick={() => {
                    setQuery(result.title);
                    setOpen(false);
                  }}
                >
                  {result.title}
                </div>
                {idx !== results.length - 1 && <Divider />}
              </Fragment>
            ))
          )}
        </div>
      )}
    </div>
  );
}
```

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

### Document Object Return Values

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

Example of documenting an object return value in TypeScript and its corresponding Interface component representation.

```ts
type ReturnValue = { value: string; onChange: () => void };

/**
 * @returns {Object} An object containing:
 * - value `string` - The value of the input.
 * - onChange `() => void` - A function to update the value.
 */
```

```html
<div class='codeblock'>
  <Interface
    name=""
    type="Object"
    description="An object containing:"
    :nested="[
      {
        name: 'value',
        type: 'string',
        description: 'The value of the input.',
      },
      {
        name: 'onChange',
        type: '() => void',
        description: 'A function to update the value.',
      },
    ]"
  />
</div>
```

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

### useBodyScrollLock Usage Example

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

Demonstrates basic usage within a modal component and the recommended pattern for managing multiple modals using a single lock at the parent level.

```tsx
function Modal() {
  useBodyScrollLock();
  return <div className="modal">Modal content</div>;
}

// Multiple modals - single lock pattern
function BodyScrollLock() {
  useBodyScrollLock();
  return null;
}

function App() {
  const hasModal = showModal1 || showModal2;

  return (
    <>
      {hasModal && <BodyScrollLock />}
      {showModal1 && <Modal1 />}
      {showModal2 && <Modal2 />}
    </>
  );
}
```

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

### useThrottledCallback Usage Example

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

An example demonstrating how to use useThrottledCallback to throttle scroll position updates in a React component.

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

function ScrollPosition() {
  const [scrollTop, setScrollTop] = useState(0);
  const setScrollTopThrottled = useThrottledCallback({
    onChange: setScrollTop,
    timeThreshold: 200,
  });

  return (
    <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
      <p>Scrolled {scrollTop}px</p>
    </div>
  );
}
```

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

### useControlledState Usage Example

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

A Toggle component demonstrating how to use useControlledState to manage state with optional controlled value, default value, and change callback.

```tsx
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>
  );
}
```

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

### useThrottledValue Usage Example

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

An example demonstrating how to use useThrottledValue to throttle scroll position updates for a progress bar component.

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

function ScrollProgress() {
  const [scrollY, setScrollY] = useState(0);
  const throttledScrollY = useThrottledValue(scrollY, 100);

  return (
    <div onScroll={e => setScrollY(e.currentTarget.scrollTop)}>
      <ProgressBar position={throttledScrollY} />
    </div>
  );
}
```

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

### Project File Structure

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

The standard directory layout for shared components and demo pages.

```text
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
```

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

### useScrollDirection Usage Example

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

An example showing how to use the hook to conditionally hide a header component based on scroll direction and position.

```tsx
function Header() {
  const { direction, position } = useScrollDirection();

  // Hide header on scroll down
  const isHidden = direction === 'down' && position > 100;

  return <header className={isHidden ? 'hidden' : 'visible'}>My Header</header>;
}
```

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

### Scaffold command shortcuts

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

Shortcuts for creating components, hooks, and utilities.

```bash
yarn run scaffold Button --t c // Create component
yarn run scaffold useButton --t h // Create hook
yarn run scaffold getButton --t u // Create util
```

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

### Preview migration with --dry-run

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

Runs the codemod in preview mode to see changes without modifying files.

```bash
npx react-simplikit-codemod mobile-to-root --dry-run --json
```

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

### File Structure Convention

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

The project structure organizes hooks, components, and utilities into individual folders with co-located implementation, tests, and documentation.

```text
src/
├── hooks/
│   └── useHookName/
│       ├── index.ts               # Re-export
│       ├── useHookName.ts         # Implementation
│       ├── useHookName.test.ts    # Tests (`.spec.ts` in older folders)
│       ├── 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)
```

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

### Add marketplace for Codex

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

Add the react-simplikit marketplace to Codex.

```bash
codex plugin marketplace add https://github.com/toss/react-simplikit
```

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

### Project Directory Structure

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

The project is organized into packages for the library, codemod CLI, and agent plugins.

```text
packages/
├── react-simplikit/   # react-simplikit — the library
│   ├── src/           # Source (hooks, components, utils)
│   ├── dist/          # Build output (per-module, mirrors src/)
│   └── package.json
├── codemod/           # react-simplikit-codemod — bin-only CLI
│   ├── src/           # cli.ts plus runner/ and mobileToRoot/
│   ├── test/          # e2e suite that spawns the built bin
│   └── package.json   # declares `bin`, no main/types/module/exports
└── plugin/            # agent plugin — no package.json, not a workspace, not on npm
    ├── .claude-plugin/            # plugin.json for Claude Code
    ├── .codex-plugin/             # plugin.json for Codex
    └── skills/
        ├── react-simplikit/         # generated by `yarn skill:gen`, gated by `yarn test:skill`
        └── react-simplikit-codemod/ # hand-written
```

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

### Snapshot and Canary Release Commands

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

Commands to create a snapshot version and publish a canary release.

```bash
GITHUB_TOKEN=$(gh auth token) yarn changeset version --snapshot canary
yarn changeset publish --tag canary  # Requires npm login + OTP
```

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

### Create a changeset

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

Run this command after making changes to trigger the automated versioning and changelog generation process.

```bash
yarn changeset
```

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

### Scaffold implementation command

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

Use this command to generate the minimum skeleton for a new implementation. The type must be component, hook, or util.

```bash
yarn run scaffold <name> --type <type>
```
Tokens:
Raw