Super SPIN

Context-friendly, extensible and flex spin component for React

Installation

npm install sspin

or

yarn add sspin

Examples

Basic Usage

import React from 'react';
import Spin from 'sspin';
import "sspin/dist/index.css";

const App = () => {
  return (
    <div>
      <Spin.WithContext value={true}>
        my content
        </Spin.WithContext>
    </div>
  );
};

export default App;

With Use Context

// parent.jsx
import React from 'react';
import Spin from 'sspin';
import "sspin/dist/index.css";

const Parent = () => {
  return (
    <div>
      <Spin.WithContext value={true}>
        <Child />
      </Spin.WithContext>
    </div>
  );
};

export default Parent;

// child.jsx
import React from 'react';
import { SpinContext } from 'sspin';

const Child = () => {
  const { setSpin } = React.useContext(SpinContext);

  React.useEffect(() => {
    setTimeout(() => {
      setSpin(false); // hide spin from parent
    }, 1000);
  }, [])

  return (
    <div>
        hello world!
    </div>
  );
};

Custom Spinner

import React from 'react';
import Spin from 'sspin';
import "sspin/dist/index.css";

const App = () => {
  return (
    <div>
      <Spin.WithContext value={true} spinner={<span>my spinner</span>}>
        content
      </Spin.WithContext>
    </div>
  );
};

export default App;

or

import React from 'react';
import Spin from 'sspin';
import "sspin/dist/index.css";

const App = () => {
  return (
    <div>
      <Spin loading={true} spinner={<span>my spinner</span>}>
        content
      </Spin>
    </div>
  );
};

export default App;

Customize The Style

/* index.css */
.sspin {
    --color-primary: #1890ff;
}