Skip to content

Latest commit

 

History

387 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-simplikit

react-simplikit · MIT License codecov Discord Badge

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

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

Packages

Package Description Version
react-simplikit Universal hooks - state/logic hooks plus mobile web utilities, all from one entry npm

Note: every hook ships from the single react-simplikit entry — mobile web utilities (viewport, keyboard, scroll) included. This replaces the deprecated @react-simplikit/mobile package. Hooks touch browser APIs only inside their bodies, so importing the root stays safe on React Native and SSR.

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

# One install covers both the root hooks and the mobile subpath
npm install react-simplikit

Quick Start

react-simplikit

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.

Mobile web utilities

import { useAvoidKeyboard, useBodyScrollLock } 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>
  );
}

// `useBodyScrollLock` locks body scroll while the component is mounted,
// and unlocks it automatically on unmount. Render this only while the modal is open.
function BodyScrollLock() {
  useBodyScrollLock();
  return null;
}

Documentation

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

Repository Structure

packages/
└── react-simplikit/    # react-simplikit (hooks, components, utils; mobile web utilities in src/mobile)

Contributing

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

CONTRIBUTING

License

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

Toss

About

A lightweight yet powerful library that provides various useful tools in React environments.

Topics

Resources

Contributing

Stars

344 stars

Watchers

4 watching

Forks

Releases

Packages

Used by

Contributors

Languages