Skip to content

Commit 0f89e58

Browse files
committed
Add readme to package
1 parent bcb6374 commit 0f89e58

File tree

2 files changed

+91
-1
lines changed

2 files changed

+91
-1
lines changed

react-activity/README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# React Activity Indicators
2+
3+
[![Build Status](https://travis-ci.org/lukevella/react-activity.svg)](https://travis-ci.org/lukevella/react-activity)
4+
[![NPM Downloads](https://img.shields.io/npm/dm/react-activity.svg)](https://www.npmjs.com/package/react-activity)
5+
6+
A library of activity indicators in the form of React components.
7+
8+
- 🔥 8 different animations to choose from
9+
- 🎨 Customizable color, size and animation speed
10+
- 🕺 Small footprint. Only ~7kB if you [add a single component](#optimizing-your-build) to your bundle.
11+
- 🆕 TypeScript support
12+
13+
![preview](https://user-images.githubusercontent.com/676849/37826344-579320d0-2e93-11e8-8f01-faa09385bf64.gif)
14+
15+
## Demo & Examples
16+
17+
Live demo: https://react-activity.lukevella.com
18+
19+
To run the examples locally, run:
20+
21+
```bash
22+
yarn && yarn start
23+
```
24+
25+
Then open [http://localhost:8000](http://localhost:8000) in your browser.
26+
27+
## Install
28+
29+
React, ReactDOM are peer dependencies, if you haven't already installed them use:
30+
31+
```
32+
npm install react-activity react react-dom
33+
```
34+
35+
## Getting Started
36+
37+
Import the activity indicators you would like to use along with the css file. Use the activity indicator component like you would any other component.
38+
39+
```jsx
40+
import React from "react";
41+
import { render } from "react-dom";
42+
import { Dots } from "react-activity";
43+
44+
const App = () => {
45+
return <Dots />;
46+
};
47+
48+
render(<App />, document.getElementById("app-container"));
49+
```
50+
51+
## Optimizing Your Build
52+
53+
To avoid bundling unnecessary code and css to your project, you can import the
54+
activity indicators individually.
55+
56+
```js
57+
import React, { Component } from "react";
58+
import { render } from "react-dom";
59+
import Dots from "react-activity/dist/Dots";
60+
61+
const App = () => {
62+
return <Dots />
63+
}
64+
65+
render(<App />, document.getElementById("app-container"));
66+
```
67+
68+
## Activity Indicators
69+
70+
- `Dots`
71+
- `Levels`
72+
- `Sentry`
73+
- `Spinner`
74+
- `Squares`
75+
- `Digital`
76+
- `Bounce`
77+
- `Windmill`
78+
79+
## Properties
80+
81+
- `size: number` All dimensions of the activity indicators are
82+
specified in ems so play around with a value until you find something that
83+
suits your needs.
84+
- `color: string` The active color of the indicator.
85+
- `speed: number (Default: 1)` The relative animation speed of the indicator.
86+
- `animating: boolean (Default: true)` Whether to show the indicator (true) or hide it (false).
87+
88+
## License
89+
90+
See [LICENSE](https://github.com/lukevella/react-activity/blob/gh-pages/LICENSE) file.

react-activity/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-activity",
3-
"version": "2.0.0",
3+
"version": "2.0.1",
44
"description": "Activity indicator component library for React applications.",
55
"main": "./dist/react-activity.js",
66
"scripts": {

0 commit comments

Comments
 (0)