react-simplikit ·

English | 한국어 | 日本語 | 简体中文 | Español

A collection of lightweight, zero-dependency React utilities for building robust applications.

Packages

Package	Description	Version
react-simplikit	React hooks, components and utils: state and logic, browser events, and mobile web (keyboard, safe area, viewport)
react-simplikit-codemod	Codemods that rewrite a codebase for a react-simplikit upgrade

Features

• Zero dependencies - Extremely lightweight
• 100% TypeScript - Full type safety
• 100% Test coverage - Reliable and stable
• SSR-safe - Works with Next.js and other SSR frameworks
• Tree-shakeable - Only bundle what you use

Installation

npm install react-simplikit

Quick Start

Use useDebounce to call your search function after the user stops typing for 300 ms. In this example, searchAPI is the search function provided by your application.

import { useState } from 'react';
import { useDebounce } from 'react-simplikit';

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

The debounced function exposes .cancel(), and pending calls are cancelled automatically when the component unmounts.

Keep a fixed element above the on-screen keyboard

Use the style returned by useAvoidKeyboard to move a fixed input above the on-screen keyboard when it opens.

import { useAvoidKeyboard } from 'react-simplikit';

function ChatInput() {
  const { style } = useAvoidKeyboard();

  return (
    <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, ...style }}>
      <input type="text" placeholder="Type a message..." />
    </div>
  );
}

AI Integration

Help your AI coding assistant find existing hooks, components and utilities, and check import and SSR rules with the included agent skill.

npx skills add toss/react-simplikit --skill react-simplikit

See the AI Integration guide for setup details. Agents can also use llms.txt to find API documentation.

Documentation

Choose a hook by the problem you need to solve in Common use cases.

Visit react-simplikit.slash.page for full documentation.

Repository Structure

packages/
├── react-simplikit/    # the library
├── codemod/            # react-simplikit-codemod
└── plugin/             # agent skill for AI coding assistants

Contributing

We welcome contributions from everyone! Please check our contribution guide.

CONTRIBUTING

License

MIT © Viva Republica, Inc. See LICENSE for details.