react-csspin

Spinner UI Component for React 18.x. This project is an wrapper of CSSPIN

Author : Stephen Won(원형섭), OpenSG Inc.
Online Demo : https://react-csspin.vercel.app/

License

MIT

Usage

install & usage

npm install react-csspin

//import
import { ReactCsspin } from "react-csspin";
import 'react-csspin/dist/style.css';

//usage 
<ReactCsspin 
  message={message} spinStyle={spinStyle}
  color={color} opacity={Number(opacity)} />

example

import React, { useState } from "react";
import { ReactCsspin } from "react-csspin";
import 'react-csspin/dist/style.css';

const App = () => {
  const [message, setMessage] = useState<string>("Loading");
  const [spinStyle, setSpinStyle] = useState<string>("cp-round");
  const [opacity, setOpacity] = useState<string>("0.7");
  const [color, setColor] = useState<string>("white");
  const [visible, setVisible] = useState<boolean>(false);

  const viewReactCsspin = () => {
    setVisible(true);
    setTimeout(() => {
      setVisible(false);
    }, 5000);
  };

  return (
    <div>
      <h2>ReactCsspin Test</h2>
      <hr />
      Loading Message :{" "}
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <br />
      Spinner Style : &nbsp;
      <select onChange={(e) => setSpinStyle(e.target.value)} value={spinStyle}>
        <option>cp-round</option>
        <option>cp-pinwheel</option>
        <option>cp-balls</option>
        <option>cp-bubble</option>
        <option>cp-flip</option>
        <option>cp-hue</option>
        <option>cp-skeleton</option>
        <option>cp-eclipse</option>
        <option>cp-boxes</option>
        <option>cp-morph</option>
        <option>cp-heart</option>
        <option>cp-meter</option>
      </select>
      <br />
      opacity(0 &lt; x &lt; 1) :{" "}
      <input
        type="text"
        value={opacity}
        onChange={(e) => setOpacity(e.target.value)}
      />
      <br />
      background-color :
      <select onChange={(e) => setColor(e.target.value)} value={color}>
        <option>black</option>
        <option>white</option>
        <option>red</option>
        <option>yellow</option>
        <option>blue</option>
        <option>aqua</option>
        <option>green</option>
        <option>orange</option>
        <option>brown</option>
        <option>salmon</option>
        <option>chocolate</option>
        <option>bisque</option>
      </select>
      <br />
      <button onClick={viewReactCsspin}>Test Spinner</button>
      {visible ? (
        <ReactCsspin
          message={message}
          spinStyle={spinStyle}
          color={color}
          opacity={Number(opacity)}
        />
      ) : (
        ""
      )}
    </div>
  );
};

export default App;

Props

• message
  • type : String
  • Loading Message
  • Default : "Loading"
• spinStyle
  • type : String
  • Spinner Style
  • default : "cp-round"
  • available value : "cp-round", "cp-pinwheel", "cp-bubble", "cp-flip", "cp-hue", "cp-skeleton", "cp-eclipse", "cp-boxes", "cp-morph", "cp-heart", "cp-meter"
  • about more detail style ---> https://webkul.github.io/csspin/
• color
  • type : String
  • default : "white"
• opacity
  • type : number(0 < x < 1)
  • default : 0.7