Skip to content

Latest commit

 

History

History
277 lines (191 loc) · 5.85 KB

README.md

File metadata and controls

277 lines (191 loc) · 5.85 KB
Raw

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