Skip to content
Material Design spinner components for React.js.
TypeScript JavaScript
Branch: master
Clone or download
wadackel Merge pull request #76 from tsuyoshiwada/dependabot/npm_and_yarn/stor…
…ybook/addon-storyshots-5.1.10

Bump @storybook/addon-storyshots from 5.1.4 to 5.1.10
Latest commit 1242f3f Jul 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot
.github docs: Add Issue & Pull Request templates Jun 8, 2019
.storybook feat: Upgrade v2 Jun 8, 2019
docs/images
examples feat: Upgrade v2 Jun 8, 2019
src feat: Upgrade v2 Jun 8, 2019
stories
test feat: Upgrade v2 Jun 8, 2019
.editorconfig Initial commit Jun 30, 2016
.eslintignore
.eslintrc.js
.gitignore feat: Upgrade v2 Jun 8, 2019
CHANGELOG.md
LICENSE Initial commit Jun 30, 2016
README.md
azure-pipelines.yml
babel.config.js feat: Upgrade v2 Jun 8, 2019
package.json v1.0.0 Jun 8, 2019
rollup.config.js feat: Upgrade v2 Jun 8, 2019
tsconfig.json feat: Upgrade v2 Jun 8, 2019
yarn.lock Bump @storybook/addon-storyshots from 5.1.4 to 5.1.10 Jul 31, 2019

README.md

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

You can’t perform that action at this time.