Skip to main content

@modern-kit

@modern-kit는 클라이언트 개발에 유용한 리액트 컴포넌트, 커스텀 훅 및 유틸리티 함수, 타입을 제공하는 라이브러리입니다.

클라이언트 개발에 필요한 모듈을 제공하는 것 뿐만아니라, 코드적으로 다양한 레퍼런스를 제공 하기 위한 목적을 갖고 있습니다.

@modern-kit는 Next.js의 SSR(Server Side Rendering)환경에서도 호환되는 등 CJS(CommonJs)환경에서도 호환되기 위해 CJS(CommonJs)와 ESM(ECMAScript Module) 두 포맷을 모두 지원합니다.


Library​

@modern-kit/react ​

  • React와 관련된 유용한 컴포넌트와 커스텀 훅을 제공하는 라이브러리입니다.

Download 
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>;
}

@modern-kit/utils ​

  • 클라이언트 개발에 유용한 유틸리티 함수를 제공하는 라이브러리입니다.

Download 
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]

@modern-kit/types ​

  • 클라이언트 개발에 유용한 유틸 타입들을 제공하는 라이브러리 입니다.

Download 
npm i @modern-kit/types
yarn add @modern-kit/types
pnpm i @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 }