@modern-kit

Packages

3 core packages for client-side development

@modern-kit/react

A library providing useful React components and custom hooks.

✓ 60+ Custom Hooks

✓ Reusable Components

✓ SSR Compatible

@modern-kit/utils

A library providing useful utility functions for client-side development.

✓ Tree-shakable

✓ 100% Type Safe

✓ Zero Dependencies

@modern-kit/types

A library providing useful TypeScript utility types.

✓ Advanced Types

✓ Type Utilities

✓ Better DX

Quick Start

Get started in 3 simple steps

Install

Install the package you need

yarn

yarn add @modern-kit/react
yarn add @modern-kit/utils
yarn add -D @modern-kit/types

npm

npm install @modern-kit/react
npm install @modern-kit/utils
npm install -D @modern-kit/types

pnpm

pnpm add @modern-kit/react
pnpm add @modern-kit/utils
pnpm add -D @modern-kit/types

Import

Import the functions or hooks you need

import { useToggle } from '@modern-kit/react';
import { debounce } from '@modern-kit/utils';

📂 SubPath Import is also supported

import { useToggle } from '@modern-kit/react/useToggle';
import { debounce } from '@modern-kit/utils/common/debounce';

Use

Use it right away with a simple API

function App() {
  const [isOpen, toggle] = useToggle();

  const handleSearch = debounce((value) => {
    console.log('Search:', value);
  }, 300);

  return <div>...</div>;
}

SubPath Imports

Reduce unused code and import only what you need to minimize bundle size

Full Import📦 Larger Bundle

// Import from the full package
import { useToggle, useDebounce } from '@modern-kit/react';
import { debounce, throttle } from '@modern-kit/utils';

SubPath Import📦 Smaller Bundle

// Import only the modules you need
import { useToggle } from '@modern-kit/react/hooks/useToggle';
import { debounce } from '@modern-kit/utils/common/debounce';

⚡

Improved Dev Server Performance

By importing only the modules you need, unnecessary code is avoided and the bundler's module identification process is optimized.

🌳

Effective Tree-shaking

The bundler can better identify individual modules, making tree-shaking more effective and helping reduce the final bundle size.

🔧

Version Compatibility

Select only the modules you need without version constraints — for example, use features in a React v17 environment without importing v18-specific hooks.