react-md-spinner
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    react-md-spinner

    Screenshot

    Build Status npm version

    Material Design spinner components for React.js.

    Live example: https://tsuyoshiwada.github.io/react-md-spinner/

    Table of Contents

    Installation

    You can install the react-md-spinner from npm.

    $ npm i -S react-md-spinner
    # or 
    $ yarn add react-md-spinner

    Features

    • 🚀 You can start using with zero configuration!
    • 🔧 Support to change of color, size, border and animation speed.
    • 💖 It can also be used in single color.
    • 🌐 Support Server-Side Rendering.

    Getting Started

    Basic Usage

    Because it is made of 100% inline styles, you can start using it right away without setting.

    import React from "react";
    import MDSpinner from "react-md-spinner";
     
    export const SpinnerExample: React.FC = () => (
      <div>
        <MDSpinner />
      </div>
    );

    Server-Side Rendering

    The following is an example of Server-Side Rendering.
    Please checkout examples directory for details.

    The point is to use ssrBehavior.

    Example

    Note: The following is pseudo code.

    Client-Side:

    import React from "react";
    import { render } from "react-dom";
    import App from "./App";
     
    render(<App />, document.getElementById("app"));

    Server-Side:

    import { ssrBehavior } from "react-md-spinner";
     
    // ...
     
    const html = (root: JSX.Element) => `<html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        ${ssrBehavior.getStylesheetString()}
      </head>
      <body>
        <div id="app">${renderToString(root)}</div>
        <script defer src="/client.js"></script>
      </body>
    </html>`;
     
    app.get("/", (_req, res) => {
      res.status(200).send(`<!doctype html>${renderer(<App />)}`);
    });

    App:

    import React from "react";
    import MDSpinner from "react-md-spinner";
     
    export const App: React.FC = () => (
      <div>
        <MDSpinner />
      </div>
    );

    Props

    You can use the following Props. All Props are Optional!

    size

    type: number
    default: 28

    Set the size (diameter) of the spinner circle.

    borderSize

    type: number
    default: undefined

    Set the spinner border size of. By default, the appropriate size is calculated according to the value of size.

    duration

    type: number
    default: 1333

    Set the animation duration (ms) of the spinner.

    color1

    type: string
    default: !rgb(66, 165, 245)

    The color of the spinner. Can be set to any valid CSS string (hex, rgb, rgba).

    color2

    type: string
    default: rgb(239, 83, 80)

    Same as above.

    color3

    type: string
    default: rgb(253, 216, 53)

    Same as above.

    color4

    type: string
    default: rgb(76, 175, 80)

    Same as above.

    singleColor

    type: string
    default: undefined

    Same as above. Use this if the spinner should be in only one single color. The settings (props) for color1 ~ 4 will be ignored by setting this singleColor property.

    API

    ssrBehavior

    In Server-Side Rendering you need to inject @keyframes inside the <head>.
    react-md-spinner provides utilities to handle them.

    • ssrBehavior.getStylesheetString(): string
    • ssrBehavior.getStylesheetComponent(): React.ReactNode

    As string output

    import { ssrBehavior } from "react-md-spinner";
     
    const html = () => `<!doctype html>
      <head>
        ${ssrBehavior.getStylesheetString()}
      </head>
      <body>
        <div id="app">
          // React stuff here
        </div>
      </body>
    </html>`;

    As React Components

    import React from "react";
    import { ssrBehavior } from "react-md-spinner";
     
    const Html: React.FC = () => (
      <html>
        <head>{ssrBehavior.getStylesheetComponent()}</head>
        <body>
          <div id="app">{/* React stuff here */}</div>
        </body>
      </html>
    );

    ChangeLog

    See CHANGELOG.md

    Contributing

    We are always welcoming your contribution 👏

    1. Fork (https://github.com/tsuyoshiwada/react-md-spinner) 🎉
    2. Create a feature branch ☕️
    3. Run test suite with the $ yarn test command and confirm that it passes ⚡️
    4. Commit your changes 📝
    5. Rebase your local changes against the master branch 💡
    6. Create new Pull Request 💌

    Available Scripts

    yarn test

    Run unit test using Jest.

    yarn lint

    Run Lint of source code using ESLint.

    yarn format

    Run formatting using Prettier and ESLint's Fixer.

    yarn build

    Run build of TypeScript code.

    yarn storybook

    Run Storybook.

    License

    MIT © tsuyoshiwada

    Install

    npm i react-md-spinner

    DownloadsWeekly Downloads

    12,407

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    370 kB

    Total Files

    15

    Last publish

    Collaborators

    • wadackel