Material Design spinner components for React.js

React md spinner is a Material Design spinner components for React.js.

Github Repo

Material Design spinner components for React.js.

See demo page: https://tsuyoshiwada.github.io/react-md-spinner/

Install
Features
Getting started
- Basic Usage
- Server-Side Rendering
API
- Props
- ssrBehavior
License
ChangeLog
Development
Contribution
Author

Install

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

$ npm install 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, { Component } from "react";
import MDSpinner from "react-md-spinner";

export default class SpinnerExample extends Component {
  render() {
    return (
      <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 and specify userAgent.

Note: It is a different code from the actual example.

Examples

Client-Side:

import React from "react";
import { render } from "react-dom";
import App from "./App";

render(
  <App userAgent={window.navigator.userAgent} />,
  document.getElementById("app")
);

Server-Side:

import { ssrBehavior } from "react-md-spinner";

// ...

const html = (root, userAgent) => `<!DOCTYPE html>
  <html lang="en">
  <head>
    ${ssrBehavior.getStylesheetString(userAgent)}
  </head>
  <body>
    <div id="app">${renderToString(root)}</div>
    <script src="./bundle.js"></script>
  </body>
</html>`;

app.get("/", (req, res) => {
  const userAgent = req.headers["user-agent"];

  res.status(200).send(html(
    <App userAgent={userAgent} />,
    userAgent
  ));
});

App:

class App extends Component {
  render() {
    return <MDSpinner
      userAgent={this.props.userAgent}
    />;
  }
}

API

Props

You can set the following properties.

Property	Type	Default	Description
`className`	`string`	`undefined`	Set the `className` for the component.
`style`	`object`	`undefined`	Set the root element style in the component.
`size`	`number`, `string`	`28`	Set the size (diameter) of the spinner circle.
`borderSize`	`number`	`Custom formula from size`	Set the spinner border size of.
`duration`	`number`	`1333`	Set the animation duration (ms) of the spinner.
`color1`	`string`	`rgb(66, 165, 245)`	The color of the spinner. Can be set to any valid CSS string (hex, rgb, rgba).
`color2`	`string`	`rgb(239, 83, 80)`	Same as above
`color3`	`string`	`rgb(253, 216, 53)`	Same as adove
`color4`	`string`	`rgb(76, 175, 80)`	Same as adove
`singleColor`	`string`	`undefined`	Same as adove. 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.
`userAgent`	`string`	`undefined`	Set the value of the current User Agent when generating inline styles, so that server-rendered markup is identical to client-rendered markup

ssrBehavior

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

API

ssrBehavior.getStylesheetString([userAgent: string]): string
ssrBehavior.getStylesheetComponent([userAgent: string]): React.Component

As string output

import { ssrBehavior } from "react-md-spinner";

const html = userAgent => `<!DOCTYPE html>
  <head>
    ${ssrBehavior.getStylesheetString(userAgent)}
  </head>
  <body>
    <div id="app">
      // React stuff here
    </div>
  </body>
</html>`;

// ...

html(/* User-Agent */);

As React Components

import { ssrBehavior } from "react-md-spinner";

const HTML = userAgent => (
  <html>
    <head>
      {ssrBehavior.getStylesheetComponent(userAgent)}
    </head>
    <body>
      <div id="app">
        // React stuff here
      </div>
    </body>
  </html>
);

// ...

HTML(/* User-Agent */);

License

Released under the MIT License

ChangeLog

See CHANGELOG.md

Development

Initialization of the project.

$ cd /your/project/dir
$ git clone https://github.com/tsuyoshiwada/react-md-spinner.git

Install some dependencies.

$ npm install

Start the development and can you see demo page (access to the http://localhost:3000/).

$ npm start

Run lint and testing.

$ npm test

Generates build file.

$ npm run build

Contribution

Thank you for your interest in react-md-spinner.js.
Bugs, feature requests and comments are more than welcome in the issues.

Before you open a PR:

Be careful to follow the code style of the project. Run npm test after your changes and ensure you do not introduce any new errors or warnings. All new features and changes need documentation.

Thanks!

Author

tsuyoshiwada

Github Repository

Tags: #React #Loading