SSR compatibility (#79)

* SSR compatibility, solve #78

* Update name prop

Author: danilowoz

README.md

@@ -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
 

src/Wrap.js

@@ -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

src/index.js

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

stories/index.js

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