Skip to main content

@modern-kit

@modern-kit is a library providing useful React components, custom hooks, utility functions, and types for client-side development.

It aims not only to provide modules needed for client-side development, but also to offer a wide variety of code references.

@modern-kit supports both CJS(CommonJs) and ESM(ECMAScript Module) formats to ensure compatibility with CJS(CommonJs) environments, including Next.js SSR(Server Side Rendering) environments.


Library​


@modern-kit/react ​

  • A library providing useful React components and custom hooks.

Install 
npm i @modern-kit/react
yarn add @modern-kit/react
pnpm i @modern-kit/react

Usage 
import { useInterval } from '@modern-kit/react';

const App = () => {
  useInterval(() => {
    console.log('interval');
  }, 300);

  return <div>Modern Kit</div>;
};
// SubPath import example
// When tsconfig moduleResolution is `bundler`
import { flatten } from '@modern-kit/react/hooks/useInterval';
// When tsconfig moduleResolution is `node`
import { flatten } from '@modern-kit/react/dist/hooks/useInterval';

const App = () => {
  useInterval(() => {
    console.log('interval');
  }, 300);

  return <div>Modern Kit</div>;
};

@modern-kit/utils ​

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

Install 
npm i @modern-kit/utils
yarn add @modern-kit/utils
pnpm i @modern-kit/utils

Usage 
import { flatten } from '@modern-kit/utils';

const arr = [1, [2, [3, 4], 5]];
const result = flatten(arr); // [1, 2, 3, 4, 5]
// SubPath import example
// When tsconfig moduleResolution is `bundler`
import { flatten } from '@modern-kit/utils/array/flatten';
// When tsconfig moduleResolution is `node`
import { flatten } from '@modern-kit/utils/dist/array/flatten';

const arr = [1, [2, [3, 4], 5]];
const result = flatten(arr); // [1, 2, 3, 4, 5]

@modern-kit/types ​

  • A library providing useful TypeScript utility types for client-side development.

Install 
npm i -D @modern-kit/types
yarn add -D @modern-kit/types
pnpm i -D @modern-kit/types

Usage 
import { Merge } from '@modern-kit/types';

type A = { a: string; b: number };
type B = { b: string; c: boolean };
type Result = Merge<A, B>;
// { a: string, b: string, c: boolean }