Skip to content

Commit cb4ee8f

Browse files
danilowozdanilowoz
authored
Merge pull request #214 from aamnah/patch-1
list props as a table
2 parents 322438e + b53736c commit cb4ee8f

File tree

1 file changed

+23
-64
lines changed

1 file changed

+23
-64
lines changed

‎README.md‎

Lines changed: 23 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -108,62 +108,22 @@ const MyLoader = () => (
108108

109109
## Options
110110

111-
#### **`animate?: boolean`**
112-
113-
Defaults to `true`. Opt-out of animations with `false`
114-
115-
#### **`title?: string`** - _Web only_
116-
117-
Defaults to `Loading interface...`. It's used to describe what element it is. Use ''(empty string) to remove.
118-
119-
#### **`baseUrl?: string`** - _Web only_
120-
121-
Required if you're using `<base url="/" />` document `<head/>`. 
122-
Defaults to an empty string. This prop is common used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
123-
124-
#### **`speed?: number`**
125-
126-
Defaults to `1.2`. Animation speed in seconds.
127-
128-
#### **`interval?: number`** - _Web only_
129-
130-
Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
131-
132-
#### **`viewBox?: string`**
133-
134-
Use viewBox props to set a custom viewBox value, for more information about how to use it, read the article [How to Scale SVG](https://css-tricks.com/scale-svg/).
135-
136-
#### **`gradientRatio?: number`** - _Web only_
137-
138-
Defaults to `1.2`. Width of the animated gradient as a fraction of the view box width.
139-
140-
#### **`rtl?: boolean`**
141-
142-
Defaults to `false`. Content right-to-left.
143-
144-
#### **`backgroundColor?: string`**
145-
146-
Defaults to `#f5f6f7` which is used as background of animation.
147-
148-
#### **`foregroundColor?: string`**
149-
150-
Defaults to `#eee` which is used as the foreground of animation.
151-
152-
#### **`backgroundOpacity?: number`** - _Web only_
153-
154-
Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve an issue in [Safari](#safari--ios)
155-
156-
#### **`foregroundOpacity?: number`** - _Web only_
157-
158-
Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve an issue in [Safari](#safari--ios)
159-
160-
#### **`style?: React.CSSProperties`**
161-
162-
Defaults to an empty object.
163-
164-
#### **`uniqueKey?: string`** - _Web only_
165-
166-
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).
111+
| <div style="width:250px">Prop name and type</div> | Environment | Description |
112+
| ------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
113+
| **`animate?: boolean`** <br/> Defaults to `true` | React DOM<br/>React Native | Opt-out of animations with `false` |
114+
| **`title?: string`** <br/> Defaults to `Loading interface...` | React DOM only | It's used to describe what element it is. <br />Use `''` (empty string) to remove. |
115+
| **`baseUrl?: string`**<br /> Defaults to an empty string | React DOM only | Required if you're using `<base url="/" />` document `<head/>`. <br/>This prop is common used as: <br/>`<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |
116+
| **`speed?: number`** <br /> Defaults to `1.2` | React DOM<br/>React Native | Animation speed in seconds. |
117+
| **`interval?: number`** <br /> Defaults to `0.25` | React DOM only | Interval of time between runs of the animation, <br/>as a fraction of the animation speed. |
118+
| **`viewBox?: string`** <br /> Defaults to `undefined` | React DOM<br/>React Native | Use viewBox props to set a custom viewBox value, <br/>for more information about how to use it, <br/>read the article [How to Scale SVG](https://css-tricks.com/scale-svg/). |
119+
| **`gradientRatio?: number`** <br /> Defaults to `1.2` | React DOM only | Width of the animated gradient as a fraction of the view box width. |
120+
| **`rtl?: boolean`** <br /> Defaults to `false` | React DOM<br/>React Native | Content right-to-left. |
121+
| **`backgroundColor?: string`** <br /> Defaults to `#f5f6f7` | React DOM<br/>React Native | Used as background of animation. |
122+
| **`foregroundColor?: string`** <br /> Defaults to `#eee` | React DOM<br/>React Native | Used as the foreground of animation. |
123+
| **`backgroundOpacity?: number`** <br /> Defaults to `1` | React DOM only | Background opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios) |
124+
| **`foregroundOpacity?: number`** <br /> Defaults to `1` | React DOM only | Animation opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios) |
125+
| **`style?: React.CSSProperties`** <br /> Defaults to `{}` | React DOM only | |
126+
| **`uniqueKey?: string`** <br /> Defaults to random unique id | React DOM only | Use the same value of prop key, <br/>that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78). |
167127

168128
See all options [live](https://danilowoz.com/react-content-loader/)
169129

@@ -253,12 +213,12 @@ In order to avoid unexpected behavior, the package doesn't have opinioned settin
253213
import { Code } from 'react-content-loader'
254214

255215
const MyCodeLoader = () => (
256-
<Code
257-
width={100}
258-
height={100}
259-
viewBox="0 0 100 100"
260-
style={{ width: "100%" }}
261-
/>
216+
<Code
217+
width={100}
218+
height={100}
219+
viewBox="0 0 100 100"
220+
style={{ width: '100%' }}
221+
/>
262222
)
263223
```
264224

@@ -274,7 +234,6 @@ import { Facebook } from 'react-content-loader'
274234
const MyFacebookLoader = () => <Facebook uniqueKey="my-random-valye" />
275235
```
276236

277-
278237
#### **Alpha is not working: Safari / iOS**
279238

280239
When using `rgba` as a `backgroundColor` or `foregroundColor` value, [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using a `rgba` value for `backgroundColor`/`foregroundColor`, use the `rgb` equivalent and move the alpha channel value to the `backgroundOpacity`/`foregroundOpacity` props.
@@ -319,7 +278,7 @@ Old browser doesn't support animation in SVG ([compatibility list](https://caniu
319278
- Vue.js: [vue-content-loading](https://github.com/LucasLeandro1204/vue-content-loading), [vue-content-loader](https://github.com/egoist/vue-content-loader);
320279
- Angular: [ngx-content-loading](https://github.com/Gbuomprisco/ngx-content-loading), [ngx-content-loader](https://github.com/NetanelBasal/ngx-content-loader).
321280

322-
----
281+
---
323282

324283
## Development
325284

0 commit comments

Comments
 (0)