docs(docz): add props section

danilowoz · danilowoz · Mar 6, 2019 · Mar 3, 2019 · Mar 3, 2019 · Mar 6, 2019
commit 7c5d4ef7413554f96f3cfa7d15d8cfbf95f76e2a
diff --git a/docs/intro.mdx b/docs/intro.mdx
@@ -1,5 +1,5 @@
 ---
-name: Home
+name: Welcome
 route: /
 ---
 
@@ -58,61 +58,3 @@ const MyLoader = () => (
 ```
 
 **Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
-
-## Options
-
-**`animate?: boolean`**
-
-Defaults to `true`. Opt-out of animations with `false`
-
-**`ariaLabel? string | boolean`**
-
-Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
-
-**`speed?: number`**
-
-Defaults to `2`. Animation speed in seconds.
-
-**`className? string`**
-
-Defaults to an empty string. The classname will be set in the `<svg />` element.
-
-**`width? number`**
-
-Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
-
-**`height? number`**
-
-Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
-
-**`rtl? boolean`**
-
-Defaults to `false`. Content right-to-left.
-
-**`preserveAspectRatio?: string`**
-
-Defaults to `xMidYMid meet`. Aspect ratio option of `<svg/>`. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/improv/doc/src/interface.ts#L7).
-
-**`primaryColor?: string`**
-
-Defaults to `#f3f3f3` which is used as background of animation.
-
-**`secondaryColor?: string`**
-
-Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
-
-**`primaryOpacity?: string`**
-
-Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
-
-**`secondaryOpacity?: string`**
-
-Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios)
-
-**`style?: React.CSSProperties`**
-
-Defaults to an empty object.
-
-**`uniquekey?: string`**
-
-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).
diff --git a/docs/props.mdx b/docs/props.mdx
@@ -0,0 +1,169 @@
+---
+name: Props
+route: /props
+---
+
+import { Playground, PropsTable } from 'docz'
+import ContentLoader, { Facebook, Instagram } from '../src'
+
+## `animate?: boolean`
+
+Defaults to `true`. Opt-out of animations with `false`
+
+<Playground>
+  <Facebook animate={false} />
+</Playground>
+
+## `ariaLabel? string | boolean`
+
+Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
+
+<Playground>
+  <Facebook ariaLabel="my custom loader" />
+</Playground>
+
+## `speed?: number`
+
+Defaults to `2`. Animation speed in seconds.
+
+<Playground>
+  <Facebook speed={4} />
+  <Facebook speed={1} />
+</Playground>
+
+## `interval?: number`
+
+Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
+
+<Playground>
+  <Facebook interval={0.8} />
+</Playground>
+
+## `className? string`
+
+Defaults to an empty string. The classname will be set in the `<svg />` element.
+
+<Playground>
+  <Facebook className="custom-classname" />
+</Playground>
+
+## `width? number`
+
+Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
+
+<Playground>
+  <Facebook width={200} />
+</Playground>
+
+## `height? number`
+
+Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
+
+<Playground>
+  <Facebook height={50} />
+</Playground>
+
+## `gradientRatio? number`
+
+Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width.
+
+<Playground>
+  <Instagram
+    gradientRatio={0.2}
+    primaryColor={'#333'}
+    secondaryColor={'#999'}
+  />
+  <Instagram gradientRatio={4} primaryColor={'#333'} secondaryColor={'#999'} />
+</Playground>
+
+## `rtl? boolean`
+
+Defaults to `false`. Content right-to-left.
+
+<Playground>
+  <Instagram rtl />
+</Playground>
+
+## `preserveAspectRatio?: string`
+
+Defaults to `xMidYMid meet`. Aspect ratio option of `<svg/>`. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/master/src/interface.ts#L7).
+
+<Playground>
+  <Instagram preserveAspectRatio="none" />
+</Playground>
+
+## `primaryColor?: string`
+
+Defaults to `#f3f3f3` which is used as background of animation.
+
+<Playground>
+  <Facebook primaryColor="#333" />
+</Playground>
+
+## `secondaryColor?: string`
+
+Defaults to `#ecebeb` which is used as the placeholder/layer of animation.
+
+<Playground>
+  <Facebook secondaryColor="#333" />
+</Playground>
+
+## `primaryOpacity?: string`
+
+Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
+
+<Playground>
+  <Facebook primaryOpacity={0.06} />
+</Playground>
+
+## `secondaryOpacity?: string`
+
+Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)
+
+<Playground>
+  <Facebook secondaryOpacity={0.06} />
+</Playground>
+
+## `style?: React.CSSProperties`
+
+Defaults to an empty object.
+
+<Playground>
+  <Facebook style={{ width: '100%' }} />
+</Playground>
+
+## **`uniquekey?: string`**
+
+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).
+
+<Playground>
+  <Facebook uniquekey="my-uniqye-key" />
+</Playground>
+
+## `viewBox?: string`
+
+Use viewbox props to set viewbox value.
+Additionally, pass viewBox props as empty string to remove viewBox.
+
+<Playground>
+  <ContentLoader viewBox="" />
+</Playground>
+
+# Issues known
+
+## BugFix in Safari
+
+When using `rgba` as a `primaryColor` or `secondaryColor` 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 an
+`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
+move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
+
+<Playground>
+  <ContentLoader
+    primaryColor="rgb(0,0,0)"
+    secondaryColor="rgb(0,0,0)"
+    primaryOpacity={0.06}
+    secondaryOpacity={0.12}
+  />
+</Playground>
diff --git a/docs/usage.mdx b/docs/usage.mdx
@@ -12,12 +12,9 @@ import ContentLoader, {
   List,
   BulletList,
 } from '../src'
-import FacebookStyle from '../src/stylized/FacebookStyle'
 
 ## Usage
 
-<PropsTable of={FacebookStyle} />
-
 ## Different Type of Loaders
 
 ### Facebook Style Loader
@@ -53,78 +50,9 @@ import FacebookStyle from '../src/stylized/FacebookStyle'
 ### Custom Loader
 
 <Playground>
-  <ContentLoader
-    height={140}
-    speed={2}
-    interval={0.5}
-    gradientRatio={0.5}
-    primaryColor={'#333'}
-    secondaryColor={'#999'}
-  >
+  <ContentLoader>
     <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
     <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
     <circle cx="35" cy="35" r="35" />
   </ContentLoader>
 </Playground>
-
-
-
-## Unique key
-
-<Playground>
-  <Facebook uniquekey="unique-key" />
-</Playground>
-
-## No Animation
-
-Set animate props to false to stop Animation
-
-<Playground>
-  <Facebook animate={false} />
-</Playground>
-
-## RTL: Right To Left Animation
-
-Set rtl props to animate from right to left
-
-<Playground>
-  <Instagram rtl />
-</Playground>
-
-## Use ViewBox
-
-Use viewbox props to set viewbox value.
-Additionally, pass viewBox props as empty string to remove viewBox.
-
-<Playground>
-  <ContentLoader viewBox="" />
-</Playground>
-
-## Custom aria label
-
-<Playground>
-  <ContentLoader ariaLabel="My custom loader" />
-</Playground>
-
-## Remove aria label
-
-<Playground>
-  <ContentLoader ariaLabel={false} />
-</Playground>
-
-## BugFix in Safari
-
-When using `rgba` as a `primaryColor` or `secondaryColor` 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 an
-`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
-move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
-
-<Playground>
-  <ContentLoader
-    primaryColor="rgb(0,0,0)"
-    secondaryColor="rgb(0,0,0)"
-    primaryOpacity={0.06}
-    secondaryOpacity={0.12}
-  />
-</Playground>
diff --git a/doczrc.js b/doczrc.js
@@ -1,25 +1,25 @@
-import emoji from "remark-emoji"
+import emoji from 'remark-emoji'
 
 export default {
-  title: "React Content Loader",
+  title: 'React Content Loader',
   typescript: true,
   mdPlugins: [emoji],
-  codeSandbox: false,
+  menu: ['Welcome', 'Usage', 'Props'],
   htmlContext: {
     head: {
       links: [
         {
-          rel: "stylesheet",
-          href: "https://codemirror.net/theme/dracula.css"
-        }
-      ]
-    }
+          rel: 'stylesheet',
+          href: 'https://codemirror.net/theme/dracula.css',
+        },
+      ],
+    },
   },
   themeConfig: {
-    codemirrorTheme: "dracula",
+    codemirrorTheme: 'dracula',
     colors: {
-      primary: "#673ab7",
-      sidebarBg: "#f3f3f3"
-    }
-  }
+      primary: '#673ab7',
+      sidebarBg: '#f3f3f3',
+    },
+  },
 }