kylefang/react-content-loader
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-content-loader.git synced 2026-04-22 11:07:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

SSR compatibility (#79)

Browse Source 
* SSR compatibility, solve #78

* Update name prop
This commit is contained in:
Danilo Woznica
2018-01-30 09:46:17 -02:00
committed by GitHub
parent f36b10d902
commit 61bd3aae6d
4 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@@ -54,16 +54,17 @@ const MyLoader = () => (
## Options
| Name | Type | Default | Description |
| ------------------- | -------- | --------------- | --------------------------- |
| speed | _Number_ | `2` | Animation speed |
| width | _Number_ | `400` | **viewBox** width of SVG |
| height | _Number_ | `130` | **viewBox** height of SVG |
| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
| secondaryColor | _String_ | `#ecebeb` | Animation color |
| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG |
| className | _String_ | '' | Classname in the <svg /> |
| Name | Type | Default | Description |
| ------------------- | -------- | ---------------- | ------------------------------------------------------------ |
| speed | _Number_ | `2` | Animation speed |
| width | _Number_ | `400` | **viewBox** width of SVG |
| height | _Number_ | `130` | **viewBox** height of SVG |
| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
| secondaryColor | _String_ | `#ecebeb` | Animation color |
| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG |
| className | _String_ | '' | Classname in the <svg /> |
| uniquekey | _String_ | random unique id | **Use the same key value, it'll solve some problems to SSR** |
### Examples

4
src/Wrap.js
View File

@@ -9,8 +9,8 @@ export type WrapProps = {
} & ContentLoaderProps
const Wrap = (props: WrapProps): React.Element<*> => {
const idClip = uid()
const idGradient = uid()
const idClip = `${props.uniquekey}-idClip` || uid()
const idGradient = `${props.uniquekey}-idGradient` || uid()
return (
<svg

1
src/index.js
View File

@@ -19,6 +19,7 @@ export type Props = {
secondaryColor: string,
preserveAspectRatio: string,
className: string,
uniquekey: string,
}
const defaultProps = {

5
stories/index.js
View File

@@ -63,3 +63,8 @@ storiesOf('ContentLoader', module)
<ContentLoader width={400} height={150} />
</Container>
))
.add('unique-key: for SSR', () => (
<Container>
<ContentLoader uniquekey="unique-key" />
</Container>
))