Refactor Wrap and Custom components (#1)

* Refactor Wrap

* Add custom elements

* Code style

* Update documentation

* Update version

Author: danilowoz

README.md

@@ -2,31 +2,66 @@
 
 This project is a collection the loader based on styles cards on Facebook.
 
-## Usage: 
+## You can use it in two ways: 
 
-First install the dependency:
+**First install the dependency:**
 ```sh
 npm i react-content-loader --save-dev
 ```
 
-After import and use:
+**Stylized:** [example](#facebook-style)
 ```js
 // import the component
 import ContentLoader from 'react-content-loader'
 
-const MyPage = () => (<ContentLoader />);
+const MyLoader = () => {
+	return(
+		<ContentLoader type="facebook" />
+	)	
+}
 ```
 
-### Options
+**Our in custom mode:** [example](#custom-style)
+```js
+// import the component
+import ContentLoader, { Rect, Circle }
+
+const MyLoader = () => {
+	return(
+		<ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
+		  <Circle x={195} y={30} radius={30} />
+		  <Rect x={50} y={80} height={10} radius={5} width={300} />
+		  <Rect x={75} y={100} height={10} radius={5} width={250} />
+		</ContentLoader>
+	)	
+}
+```
+
+
+## Options
+
+**ContentLoader (wrap) options:**
 
 | Name | Type | Default | Description |
 |---|---|---|---|
-| style | _Object_ |  |  |
+| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
 | type | _String_ | `facebook` | Options: `facebook`, `instagram`, `code` |
 | speed | _Number_ | `2` | Animation speed |
+| height | _Number_ | `130` | Height component |
 | primaryColor | _String_ | `#f3f3f3` | Background the SVG | 
 | secondaryColor | _String_ | `#ecebeb` | Animation color | 
 
+
+**Custom element options:**
+
+|  | x | y | radius | width | height |
+|---|---|---|---|---|---|
+| **Rect** | × |  × |  × |  × |  × |
+| **Circle** | × |  × |  × | – | – | 
+
+
+## Examples
+
 #### Facebook Style
 ![Facebook Style](https://cloud.githubusercontent.com/assets/4838076/22555575/3a90ecee-e94b-11e6-97df-8054e7297bd8.gif)
 
@@ -36,11 +71,14 @@ const MyPage = () => (<ContentLoader />);
 #### Code Style
 ![Code Style](https://cloud.githubusercontent.com/assets/4838076/22555473/effa54c2-e94a-11e6-9128-9b608bcc69d9.gif)
 
+#### Custom Style
+![Code Style](https://cloud.githubusercontent.com/assets/4838076/22760218/aa619f32-ee3c-11e6-9cd1-c4af9dd1278e.gif)
+
 ### Todo
 - [x] Code component;
+- [x] Custom elements;
 - [ ] List component;
 - [ ] Test in multiples browser;
-- [ ] A more useful new project;
 
 #### Credits
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-content-loader",
-    "version": "1.1.0",
-    "description": "This project is a collection the loader based on styles cards on Facebook.",
+    "version": "1.2.0",
+    "description": "This project is a collection the loader based on styles cards on Facebook, make with SVG and React.",
     "repository": {
         "type": "git",
         "url": "https://github.com/danilowoz/react-content-loader"

src/CodeStyle.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+const Wrap = (props) => {
+
+    const generateId = () => {
+      const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+      let text = ""
+
+      for( let i = 0; i < 10; i++ )
+          text += possible.charAt(Math.floor(Math.random() * possible.length))
+
+      return text
+    }
+
+    let idClip = generateId()
+    let idGradient = generateId()
+
+    return(
+        <svg viewBox={`0 0 400 ${props.height}`} version="1.1" style={props.style} preserveAspectRatio="xMidYMid meet">
+            <rect style={{fill: `url(#${idGradient})`}} clipPath={`url(#${idClip})`} x="0" y="0" width="400" height={props.height} />
+
+            <defs>
+                <clipPath id={`${idClip}`}>
+                    { props.children }
+                </clipPath>
+
+                <linearGradient id={`${idGradient}`}>
+                    <stop offset="0%" stopColor={props.primaryColor}>
+                        <animate attributeName="offset" values="-2; 1" dur={`${props.speed}s`} repeatCount="indefinite" />
+                    </stop>
+                    <stop offset="50%" stopColor={props.secondaryColor}>
+                        <animate attributeName="offset" values="-1.5; 1.5" dur={`${props.speed}s`} repeatCount="indefinite" />
+                    </stop>
+                    <stop offset="100%" stopColor={props.primaryColor}>
+                        <animate attributeName="offset" values="-1; 2" dur={`${props.speed}s`} repeatCount="indefinite" />
+                    </stop>
+                </linearGradient>
+            </defs>
+        </svg>
+    )
+}
+
+export default Wrap

src/FacebookStyle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Circle = (props) => {
+	const { x = 0, y = 0, radius = 50 } = props
+	return <circle cx={x} cy={y} r={radius} />
+}
+
+export default Circle

src/InstagramStyle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Rect = (props) => {
+	const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
+	return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
+}
+
+export default Rect