toss/react-simplikit

최근 기록된 소스 활동: 2026년 10월 28일 08:13

SkillsMP 카탈로그 업데이트: 2026년 11월 5일 19:57

수집된 skills: 10

GitHub 스타: 359
GitHub 포크: 78

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

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

저장소 README

README 원본 파일: README.md

README 원본 보기

README 전체 펼치기

![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>

저장소 README를 불러오는 중…

이 저장소의 skills

소프트웨어 개발자 소프트웨어 품질 보증 분석가·테스터

직업 카테고리 2개 · 90% 분류됨

소프트웨어 품질 보증 분석가·테스터

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

원문 언어: 영어

2026-03-04

수집된 skill 10개 중 10개를 표시합니다.