react-md-spinner
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-spinnerFeatures
🚀 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(): stringssrBehavior.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
- Fork (https://github.com/tsuyoshiwada/react-md-spinner)
🎉 - Create a feature branch
☕ - Run test suite with the
$ yarn testcommand and confirm that it passes⚡ - Commit your changes
📝 - Rebase your local changes against the
masterbranch💡 - 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.