Skip to content

Commit c2425ff

Browse files
aamnahaamnah
authored
list props as a table
table makes it easier to quickly scan through the props and see default values, imho
1 parent 1cfb3fa commit c2425ff

File tree

1 file changed

+16
-56
lines changed

1 file changed

+16
-56
lines changed

‎README.md‎

Lines changed: 16 additions & 56 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+
| 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). |
167127

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

0 commit comments

Comments
 (0)