[React] 로딩 컴포넌트를 제공하는 라이브러리 (Spinner, Skeleton 등)

 

 

로딩 컴포넌트를 제공하는 라이브러리

basic-loading

 

---

 

로딩 UI 컴포넌트

 

 

 로딩 컴포넌트를 간단하게 사용할 수 있는 basic-loading이라는 라이브러리가 개발이 완료되어 블로그에도 소개하려 한다🤩 이 라이브러리에서 제공하는 컴포넌트는 총 8가지로, BasicDot, BounceDot, Fade, ProgressBar, Pulse, Skeleton, Spinner, Wave가 있다. React 기반으로 만들어진 라이브러리로, React와 Next.js에서 사용 가능하다.

 

NPM: https://www.npmjs.com/package/basic-loading

문서: https://basic-loading-docs.vercel.app/

 

 

사용법

 

1. 설치

 

npm 혹은 yarn을 이용하여 설치를 해준다.

 

npm install basic-loading

 

yarn add basic-loading

 

 

2. import

 

 그리고 원하는 위치로 가서 import로 원하는 컴포넌트를 불러온 뒤 option에 값을 넣어주면 된다. 각 컴포넌트마다 option에 들어가는 값이 다른데, 공식문서를 통해 확인하면 된다.

 

import { Spinner } from "basic-loading";
  
export default function App() {
     const option = {
         size: 50,
     };
  
     return <Spinner option={option} />;
}

 

Spinner 컴포넌트의 option 값들

 

 

예를 들어 Spinner 컴포넌트를 보면 size는 필수값이고 나머지 값들은 원하는 경우 추가할 수 있도록 되어있다. 다른 값들을 입력하지 않을 경우 Default Value에 있는 값이 들어간다.