Skip to content

Commit b53736c

Browse files
danilowozdanilowoz
committed
docs(props): improve legibility
1 parent c2425ff commit b53736c

File tree

1 file changed

+23
-24
lines changed

1 file changed

+23
-24
lines changed

‎README.md‎

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

109109
## Options
110110

111-
| Prop | Default | Description |
112-
| ----------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
113-
| `animate?: boolean` | `true` | Opt-out of animations with `false` |
114-
| `title?: string` - _Web only_ | `Loading interface...` | It's used to describe what element it is. Use ''(empty string) to remove. |
115-
| `baseUrl?: string` - _Web only_ | empty string | Required if you're using `<base url="/" />` document `<head/>`. 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). |
116-
| `speed?: number` | `1.2` | Animation speed in seconds. |
117-
| `interval?: number` - _Web only_ | `0.25` | Interval of time between runs of the animation, as a fraction of the animation speed. |
118-
| `viewBox?: string` | | 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/). |
119-
| `gradientRatio?: number` - _Web only_ | `1.2` | Width of the animated gradient as a fraction of the view box width. |
120-
| `rtl?: boolean` | `false` | Content right-to-left. |
121-
| `backgroundColor?: string` | `#f5f6f7` | used as background of animation. |
122-
| `foregroundColor?: string` | `#eee` | used as the foreground of animation. |
123-
| `backgroundOpacity?: number` - _Web only_ | `1` |  Background opacity (0 = transparent, 1 = opaque) used to solve an issue in [Safari](#safari--ios) |
124-
| `foregroundOpacity?: number` - _Web only_ | `1` | Animation opacity (0 = transparent, 1 = opaque) used to solve an issue in [Safari](#safari--ios) |
125-
| `style?: React.CSSProperties` | `{}` | |
126-
| `uniqueKey?: string` - _Web only_ | 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). |
127127

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

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

215215
const MyCodeLoader = () => (
216-
<Code
217-
width={100}
218-
height={100}
219-
viewBox="0 0 100 100"
220-
style={{ width: "100%" }}
221-
/>
216+
<Code
217+
width={100}
218+
height={100}
219+
viewBox="0 0 100 100"
220+
style={{ width: '100%' }}
221+
/>
222222
)
223223
```
224224

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

237-
238237
#### **Alpha is not working: Safari / iOS**
239238

240239
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.
@@ -279,7 +278,7 @@ Old browser doesn't support animation in SVG ([compatibility list](https://caniu
279278
- Vue.js: [vue-content-loading](https://github.com/LucasLeandro1204/vue-content-loading), [vue-content-loader](https://github.com/egoist/vue-content-loader);
280279
- Angular: [ngx-content-loading](https://github.com/Gbuomprisco/ngx-content-loading), [ngx-content-loader](https://github.com/NetanelBasal/ngx-content-loader).
281280

282-
----
281+
---
283282

284283
## Development
285284

0 commit comments

Comments
 (0)