Skip to content

Commit efc7fdd

Browse files
danilowozdanilowoz
authored
chore(docs): updating (#135)
1 parent 15eb1fe commit efc7fdd

File tree

5 files changed

+518
-406
lines changed

5 files changed

+518
-406
lines changed

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<p align="center">
2-
<img width="350
3-
" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png">
2+
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png"/>
43
</p>
54
<p align="center">
65
<img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
@@ -227,6 +226,9 @@ Fork the repo then clone it
227226

228227
`$ yarn tsc:watch`: Typescript checking with watching;
229228

229+
### Commit messages
230+
231+
Commit messages should follow the [commit message convention](https://conventionalcommits.org/) so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or `npm run commit`) instead of git commit, which provides an interactive CLI for generating proper commit messages.
230232

231233
## License
232234

‎docs/intro.mdx‎

Lines changed: 88 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,116 @@ name: Home
33
route: /
44
---
55

6-
# Introduction
7-
86
<p align="center">
9-
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png" />
7+
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png"/>
108
</p>
119
<p align="center">
1210
<img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
1311
</p>
1412

15-
React component that uses SVG to create a collection of loaders which simulates
16-
the structure of the content that will be loaded, similar to Facebook cards loaders.
13+
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
1714

1815
## Features
1916

20-
- :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
21-
- :pencil2: **Create your own loading:** use the
22-
[create-content-loader](https://danilowoz.github.io/create-content-loader/) to create
23-
your own custom loadings easily;
24-
- :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
25-
[examples](usage#different-type-of-loaders);
26-
- :rocket: **Performance:** written using only the SVG API.
17+
- :gear: **Customizable:** Feel free to change the colors, speed, sizes and even **RTL**;
18+
- :ok_hand: **Plug and play:** with many presets to use, see the [examples](#examples);
19+
- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create your own custom loaders easily;
20+
- ⚛️ **Lightweight:** only **1.4kB** gzipped and **0 dependencies**;
21+
22+
## Getting Started
2723

28-
## Installation
24+
```sh
25+
npm i react-content-loader --save
26+
```
27+
28+
```sh
29+
yarn add react-content-loader
30+
```
2931

30-
Yarn: `yarn add react-content-loader`
32+
CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
3133

32-
Npm: `npm i react-content-loader --save`
34+
## Usage
3335

34-
CDN: [from JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
36+
There are two ways to use it:
3537

36-
**You can use it in two ways ([See the options)](#options):**
38+
**1. Presets, see the [examples](#examples):**
3739

3840
```jsx
39-
// import the component
4041
import ContentLoader, { Facebook } from 'react-content-loader'
4142

4243
const MyLoader = () => <ContentLoader />
4344
const MyFacebookLoader = () => <Facebook />
4445
```
4546

46-
**Or in custom mode, using the
47-
[online tool](https://danilowoz.github.io/create-react-content-loader/)**
47+
**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**
48+
49+
```jsx
50+
const MyLoader = () => (
51+
<ContentLoader>
52+
{/* Only SVG shapes */}
53+
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
54+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
55+
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
56+
</ContentLoader>
57+
)
58+
```
59+
60+
**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
4861

4962
## Options
5063

51-
| Name | Type | Default | Description |
52-
| ----------------------- | ------------------ | ---------------------- | ------------------------------------------------------------------------- |
53-
| **animate** | `Boolean` | `true` | `false` to render with no animation |
54-
| **ariaLabel** | `String | Boolean` | `Loading interface...` | Describe what element it is |
55-
| **speed** | `Number` | `2` | Animation speed in seconds |
56-
| **className** | `String` | `` | Classname in the `<svg/>` |
57-
| **width** | `Number` | `400` | viewBox width of `<svg/>` |
58-
| **height** | `Number` | `130` | viewBox height of `<svg/>` |
59-
| **rtl** | `Boolean` | `false` | Right-to-left animation |
60-
| **preserveAspectRatio** | `String` | `xMidYMid meet` | Aspect ratio option of `<svg/>` |
61-
| **primaryColor** | `String` | `#f3f3f3` | Background |
62-
| **secondaryColor** | `String` | `#ecebeb` | Animation color |
63-
| **primaryOpacity** | `Number` | `1` | Background opacity (0 = transparent, 1 = opaque) |
64-
| **secondaryOpacity** | `Number` | `1` | Animation opacity (0 = transparent, 1 = opaque) |
65-
| **style** | `Object` | `null` | Ex: `{ width: '100%', height: '70px' }` |
66-
| **uniquekey** | `String` | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |
64+
**`animate?: boolean`**
65+
66+
Defaults to `true`. Opt-out of animations with `false`
67+
68+
**`ariaLabel? string | boolean`**
69+
70+
Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
71+
72+
**`speed?: number`**
73+
74+
Defaults to `2`. Animation speed in seconds.
75+
76+
**`className? string`**
77+
78+
Defaults to an empty string. The classname will be set in the `<svg />` element.
79+
80+
**`width? number`**
81+
82+
Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
83+
84+
**`height? number`**
85+
86+
Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
87+
88+
**`rtl? boolean`**
89+
90+
Defaults to `false`. Content right-to-left.
91+
92+
**`preserveAspectRatio?: string`**
93+
94+
Defaults to `xMidYMid meet`. Aspect ratio option of `<svg/>`. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/improv/doc/src/interface.ts#L7).
95+
96+
**`primaryColor?: string`**
97+
98+
Defaults to `#f3f3f3` which is used as background of animation.
99+
100+
**`secondaryColor?: string`**
101+
102+
Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
103+
104+
**`primaryOpacity?: string`**
105+
106+
Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
107+
108+
**`secondaryOpacity?: string`**
109+
110+
Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
111+
112+
**`style?: React.CSSProperties`**
113+
114+
Defaults to an empty object.
115+
116+
**`uniquekey?: string`**
117+
118+
Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).

‎docs/usage.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ContentLoader, {
1414
} from '../src'
1515
import FacebookStyle from '../src/stylized/FacebookStyle'
1616

17-
# React Content Loader
17+
## Usage
1818

1919
<PropsTable of={FacebookStyle} />
2020

@@ -102,7 +102,7 @@ Additionally, pass viewBox props as empty string to remove viewBox.
102102
<ContentLoader ariaLabel="My custom loader" />
103103
</Playground>
104104

105-
### Remove aria label
105+
## Remove aria label
106106

107107
<Playground>
108108
<ContentLoader ariaLabel={false} />

‎package.json‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"test:watch": "jest tests --watch",
3636
"tsc": "node_modules/.bin/tsc",
3737
"tsc:watch": "npm run tsc -- --watch",
38+
"commit": "git-cz",
3839
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
3940
"coverage": "codecov",
4041
"release": "semantic-release"
@@ -46,12 +47,15 @@
4647
"@babel/preset-react": "^7.0.0",
4748
"@babel/register": "^7.0.0",
4849
"@babel/runtime": "^7.0.0",
50+
"@commitlint/cli": "^7.5.0",
51+
"@commitlint/config-conventional": "^7.5.0",
4952
"@types/jest": "^23.3.10",
5053
"@types/react": "^16.7.13",
5154
"@types/react-dom": "^16.0.11",
5255
"@types/react-test-renderer": "^16.0.3",
5356
"babel-core": "^7.0.0-bridge.0",
5457
"babel-jest": "^23.6.0",
58+
"commitizen": "^3.0.5",
5559
"cz-conventional-changelog": "^2.1.0",
5660
"docz": "^0.12.13",
5761
"docz-theme-default": "^0.12.13",
@@ -79,7 +83,18 @@
7983
"husky": {
8084
"hooks": {
8185
"pre-commit": "npm run format && npm run tsc",
82-
"pre-push": "npm run test"
86+
"pre-push": "npm run test",
87+
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
88+
}
89+
},
90+
"commitlint": {
91+
"extends": [
92+
"@commitlint/config-conventional"
93+
]
94+
},
95+
"config": {
96+
"commitizen": {
97+
"path": "./node_modules/cz-conventional-changelog"
8398
}
8499
},
85100
"jest": {
@@ -101,10 +116,5 @@
101116
"json",
102117
"node"
103118
]
104-
},
105-
"config": {
106-
"commitizen": {
107-
"path": "./node_modules/cz-conventional-changelog"
108-
}
109119
}
110120
}

0 commit comments

Comments
 (0)