Skip to content

Commit b6b762b

Browse files
danilowozdanilowoz
authored
Update the readme, close danilowoz#47 (danilowoz#50)
1 parent 4e5bbf5 commit b6b762b

File tree

1 file changed

+63
-64
lines changed

1 file changed

+63
-64
lines changed

‎README.md‎

Lines changed: 63 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,71 @@
11
<p align="center">
2-
<img width="230px" src="https://user-images.githubusercontent.com/4838076/31404417-65822d5e-add2-11e7-90c3-ce8cded1a02e.gif" alt="React Content Loader" title="React Content Loader" />
2+
<img width="350
3+
" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png">
4+
</p>
5+
<p align="center">
6+
<img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
37
</p>
48

59
React component that uses SVG to create a collection of loaders which simulates the structure of the
6-
content that will be loaded, similar to Facebook cards loaders. **Use the
7-
[online tool](https://github.com/danilowoz/create-react-content-loader) to create your own custom
8-
loader.**
10+
content that will be loaded, similar to Facebook cards loaders.
911

10-
If you are looking for
11-
[React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient),
12-
[Preact](https://github.com/bonitasoft/preact-content-loader) or
13-
[Vue.js](https://github.com/LucasLeandro1204/vue-content-loading)
12+
## Features
1413

15-
## Installation
14+
* **Complety customizable:** you can change the colors, speed and sizes;
15+
* **Create your own loading:** use the
16+
[create-react-content-loader](https://danilowoz.github.io/create-react-content-loader/) to create
17+
your customs loadings easily;
18+
* **You can use right now:** there are a lot of presets to use the loader, see the
19+
[options](#options);
20+
* **Perfomance:** react-content-loader uses pure SVG to work, so it's works without any javascript,
21+
canvas, etc;
1622

17-
**Using npm:**
23+
## Usage
1824

19-
```sh
20-
npm i react-content-loader --save
21-
```
25+
### Installation
2226

23-
**Using Yarn:**
24-
25-
```sh
26-
yarn add react-content-loader
27-
```
27+
Yarn: `$ yarn add react-content-loader`
2828

29-
## You can use it in two ways:
29+
Npm: `$ npm i react-content-loader --save`
3030

31-
**Stylized:** [example](#facebook-style)
31+
**You can use it in two ways ([See the options)](#options):**
3232

3333
```jsx
3434
// import the component
3535
import ContentLoader from 'react-content-loader'
3636

37-
const MyLoader = () => {
38-
return <ContentLoader type="facebook" />
39-
}
37+
const MyLoader = () => <ContentLoader type="facebook" />
4038
```
4139

42-
**Or in custom mode:** [example](#custom-style)
43-
44-
Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for
45-
your custom loaders
40+
**Or in custom mode, using the
41+
[online tool](https://danilowoz.github.io/create-react-content-loader/)**
4642

4743
```jsx
48-
// import the component
49-
import ContentLoader from 'react-content-loader'
50-
51-
const MyLoader = () => {
52-
return (
53-
<ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
54-
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
55-
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
56-
<circle cx="35" cy="35" r="35" />
57-
</ContentLoader>
58-
)
59-
}
44+
const MyLoader = () => (
45+
<ContentLoader>
46+
{/* Pure SVG */}
47+
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
48+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
49+
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
50+
</ContentLoader>
51+
)
6052
```
6153

6254
## Options
6355

64-
| Name | Type | Default | Description |
65-
| ------------------- | -------- | :-------------: | --------------------------------------------------------------- |
66-
| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
67-
| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` |
68-
| speed | _Number_ | `2` | Animation speed |
69-
| width | _Number_ | `400` | **viewBox** width of SVG |
70-
| height | _Number_ | `130` | **viewBox** height of SVG |
71-
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
72-
| secondaryColor | _String_ | `#ecebeb` | Animation color |
56+
| Name | Type | Default | Description |
57+
| ------------------- | -------- | --------------- | --------------------------------------------------------------- |
58+
| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` |
59+
| speed | _Number_ | `2` | Animation speed |
60+
| width | _Number_ | `400` | **viewBox** width of SVG |
61+
| height | _Number_ | `130` | **viewBox** height of SVG |
62+
| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
63+
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
64+
| secondaryColor | _String_ | `#ecebeb` | Animation color |
7365
| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG |
74-
| className | _String_ | '' | Classname in the <svg /> |
75-
76-
**Custom element options:**
66+
| className | _String_ | '' | Classname in the <svg /> |
7767

78-
| | x | y | radius | width | height |
79-
| ---------- | -------- | -------- | -------- | :------: | :------: |
80-
| **Rect** | _Number_ | _Number_ | _Number_ | _Number_ | _Number_ |
81-
| **Circle** | _Number_ | _Number_ | _Number_ | – | – |
82-
83-
Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for
84-
your custom loaders
85-
86-
## Examples
68+
### Examples
8769

8870
#### Facebook Style
8971

@@ -109,10 +91,27 @@ your custom loaders
10991

11092
![Code Style](https://cloud.githubusercontent.com/assets/4838076/22760218/aa619f32-ee3c-11e6-9cd1-c4af9dd1278e.gif)
11193

112-
#### Credits
94+
## Alternatives
95+
96+
* [React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient);
97+
* [Preact](https://github.com/bonitasoft/preact-content-loader);
98+
* [Vue.js](https://github.com/LucasLeandro1204/vue-content-loading);
99+
* [Angular](https://github.com/Gbuomprisco/ngx-content-loading).
100+
101+
## Development
102+
103+
Fork the repo then clone it
104+
105+
`$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader`
106+
107+
Install the dependencies
108+
109+
`$ yarn`
110+
111+
Run the storybook to see your changes
113112

114-
[Boilerplate for creating React Npm packages with ES2015](https://github.com/juliancwirko/react-npm-boilerplate)
113+
`$ yarn storybook`
115114

116-
#### License
115+
## License
117116

118-
MIT
117+
[MIT](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE)

0 commit comments

Comments
 (0)