react-md-spinner

!Screenshot


> Material Design spinner components for React.js.

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

Table of Contents

- Installation
- Features
- Getting Started
- Basic Usage
- Server-Side Rendering
- Example
- Props
- size
- borderSize
- duration
- color1
- color2
- color3
- color4
- singleColor
- API
- ssrBehavior
- As string output
- As React Components
- ChangeLog
- Contributing
- Available Scripts
- yarn test
- yarn lint
- yarn format
- yarn build
- yarn storybook
- License

Installation

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

``bash
$ npm i -S react-md-spinner


or

`typescript
import React from "react";
import MDSpinner from "react-md-spinner";

export const SpinnerExample: React.FC = () => (


The point is to use ssrBehavior.

#### Example

Note: The following is pseudo code.

Client-Side:

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

render(, document.getElementById("app"));
`

Server-Side:

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

// ...

const html = (root: JSX.Element) =>



${ssrBehavior.getStylesheetString()}

app.get("/", (_req, res) => {
res.status(200).send(${renderer()});
});
`

App:

`typescript
import React from "react";
import MDSpinner from "react-md-spinner";

export const App: React.FC = () => (


type: number
default: 28

Set the size (diameter) of the spinner circle.

$3

type: number
default: undefined

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

$3

type: number
default: 1333

Set the animation duration (ms) of the spinner.

$3

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

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

$3

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

Same as above.

$3

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

Same as above.

$3

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

Same as above.

$3

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

$3

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

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

#### As string output

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

const html = () =>

${ssrBehavior.getStylesheetString()}

`typescript
import React from "react";
import { ssrBehavior } from "react-md-spinner";

const Html: React.FC = () => (

{ssrBehavior.getStylesheetComponent()}



1. Fork (https://github.com/tsuyoshiwada/react-md-spinner) :tada:
1. Create a feature branch :coffee:
1. Run test suite with the $ yarn test command and confirm that it passes :zap:
1. Commit your changes :memo:
1. Rebase your local changes against the master` branch :bulb:
1. Create new Pull Request :love_letter:

Available Scripts

$3

Run unit test using Jest.

$3

Run Lint of source code using ESLint.

$3

Run formatting using Prettier and ESLint's Fixer.

$3

Run build of TypeScript code.

$3

Run Storybook.

License

MIT © tsuyoshiwada