REACT SPINNERS

npm

NPM으로 설치하기

https://www.npmjs.com/package/react-spinners?activeTab=readme

npm으로 간편하게 설치 가능

REACT SPINNER

홈페이지에 방문하면 다양한 종류의 준비된 로딩스피너를 고를 수 있다.
다양한 종류의 스피너 중 진행하는 웹/앱 프로젝트에 간편하게 구현할 수 있는게 react-spinner의 최대 장점

react-spinners

사용법

import { useState, CSSProperties } from "react";
import ClipLoader from "react-spinners/ClipLoader";


function App() {
  let [loading, setLoading] = useState(true);

  return (
      <ClipLoader
        color="#fff"
        loading={loading}
        cssOverride={override}
        size={150}
        aria-label="Loading Spinner"
        data-testid="loader"
      />
    </div>
  );
}

기본적인 사용 법은

1. "react-spinners/ClipLoader"에서 원하는 로딩스피너를 import해서 가져온 후
2. useState boolean값으로 해당 로딩스피너를 노출할지 말지 상태관리만 해주면 된다.

React로 데이터를 가져와서 웹/앱을 구현하는 경우
가져오는 로딩시간을 이용자가 오류라고 판단하지 않도록 로딩스피너를 구현할 때 쉽게 UI구현 및 관리할 수 있다.

옵션

color

color: "#000000";

문자열로 원하는 색상을 추가하면 된다.

• #0000000(6자리)나 #000(3자리) 모두 가능
• "red" , "orange" 같은 지정된 문자도 가능

size

size={150}

size에 숫자로 추가하면 된다 옵션이 없을시 디폴트 값으로 출력
size외에도 height, width, radius props를 받을 수 있음.
주의할 점은 px단위로 기입해야하는 거 같음..?

종류별 디폴트 값은 아래와 같다. 출처

cssOverride

아직 정식으로 사용해본적은 없지만 세밀하게 css 코드를 추가할 수 있다.

const override: CSSProperties = {
  display: "block",
  margin: "0 auto",
  borderColor: "red",
};

해당 구문을 먼저 선언한뒤 아래와 같이 props 값으로 넣어주면 된다.

cssOverride={override}

react를 시작하고 npm을 통해 다양하고 편리한 기능들을 쉽게 구현할 수 있어서 진짜 좋은듯하다 ^_^!