toss/react-simplikit

Dernière activité source enregistrée: 14 octobre 2026 à 08:13

Catalogue SkillsMP mis à jour: 29 octobre 2026 à 18:30

skills collectés: 10

Étoiles GitHub: 358
Forks GitHub: 76

Installer avec un assistant IA

Copiez ce prompt dans l’assistant IA que vous utilisez.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/toss/react-simplikit.

README du dépôt

Fichier source du README : README.md

Lire le README source

Afficher le README complet

![react-simplikit](./public/images/og.png) # react-simplikit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/react-simplikit/blob/main/LICENSE) [![codecov](https://codecov.io/gh/toss/react-simplikit/graph/badge.svg?token=RHVOZ3J3TU)](https://codecov.io/gh/toss/react-simplikit) [![Discord Badge](https://discord.com/api/guilds/1281071127052943361/widget.png?style=shield)](https://discord.gg/vGXbVjP2nY) English | [한국어](./README-ko_kr.md) | [日本語](./README-ja_jp.md) | [简体中文](./README-zh_hans.md) | [Español](./README-es.md) A collection of lightweight, zero-dependency React utilities for building robust applications. ## Packages | Package | Description | Version | | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | | [react-simplikit](./packages/react-simplikit) | React hooks, components and utils: state and logic, browser events, and mobile web (keyboard, safe area, viewport) | [![npm](https://img.shields.io/npm/v/react-simplikit.svg)](https://www.npmjs.com/package/react-simplikit) | | [react-simplikit-codemod](./packages/codemod) | Codemods that rewrite a codebase for a `react-simplikit` upgrade | [![npm](https://img.shields.io/npm/v/react-simplikit-codemod.svg)](https://www.npmjs.com/package/react-simplikit-codemod) | ## 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 ```bash 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. ```tsx 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. ```tsx 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. ```bash npx skills add toss/react-simplikit --skill react-simplikit ``` See the [AI Integration guide](https://react-simplikit.slash.page/ai-integration.html) for setup details. Agents can also use [llms.txt](https://react-simplikit.slash.page/llms.txt) to find API documentation. ## Documentation Choose a hook by the problem you need to solve in [Common use cases](https://react-simplikit.slash.page/use-cases.html). Visit [react-simplikit.slash.page](https://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](./.github/CONTRIBUTING.md) ## License MIT © Viva Republica, Inc. See [LICENSE](./LICENSE) for details. <a title="Toss" href="https://toss.im"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.toss.im/logos/png/4x/logo-toss-reverse.png"> <img alt="Toss" src="https://static.toss.im/logos/png/4x/logo-toss.png" width="100"> </picture> </a>

Chargement du README du dépôt…

Skills dans ce dépôt

Développeurs de logiciels Analystes en assurance qualité des logiciels et testeurs

2 catégories métier · 90% classifié

Analystes en assurance qualité des logiciels et testeurs

Write test code. 100% coverage, SSR tests, edge cases. Use when writing tests, adding test coverage.

Langue du texte source : anglais

2026-03-04

Affichage de 10 skills collectés sur 10.