refactor(Readme and types): Cosmetic things

README.md

@@ -59,18 +59,18 @@ const MyLoader = () => (
 
 ## Options
 
-| Name                | Type      | Default          | Description                                                  |
-| ------------------- | --------- | ---------------- | ------------------------------------------------------------ |
-| speed               | _Number_  | `2`              | Animation speed                                              |
-| animate             | _Boolean_ | `true`           | `false` to render with no animation                          |
-| 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** |
+| Name                    | Type        | Default          | Description                                                |
+| ----------------------- | ----------- | ---------------- | ---------------------------------------------------------- |
+| **animate**             | `{Boolean}` | `true`           | `false` to render with no animation                        |
+| **speed**               | `{Number}`  | `2`              | Animation speed in seconds                                 |
+| **className**           | `{String}`  | `''`             | Classname in the `<svg/>`                                  |
+| **width**               | `{Number}`  | `400`            | viewBox width of `<svg/>`                                  |
+| **height**              | `{Number}`  | `130`            | viewBox height of `<svg/>`                                 |
+| **preserveAspectRatio** | `{String}`  | `xMidYMid meet`  | Aspect ratio option of `<svg/>`                            |
+| **primaryColor**        | `{String}`  | `#f3f3f3`        | Background                                                 |
+| **secondaryColor**      | `{String}`  | `#ecebeb`        | Animation color                                            |
+| **style**               | `{Object}`  | `null`           | Ex: `{ marginTop: '50px' }`                                |
+| **uniquekey**           | `{String}`  | random unique id | **Use the same key value, it works to Server Side Render** |
 
 ### Examples
 

package.json

@@ -1,7 +1,8 @@
 {
   "name": "react-content-loader",
   "version": "3.0.2",
-  "description": "React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.",
+  "description":
+    "React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.",
   "repository": {
     "type": "git",
     "url": "https://github.com/danilowoz/react-content-loader"
@@ -15,17 +16,8 @@
     "url": "https://github.com/danilowoz/react-content-loader/issues"
   },
   "homepage": "https://github.com/danilowoz/react-content-loader",
-  "keywords": [
-    "react",
-    "facebook-style",
-    "loader",
-    "loading",
-    "content",
-    "svg"
-  ],
-  "files": [
-    "dist"
-  ],
+  "keywords": ["react", "facebook-style", "loader", "loading", "content", "svg"],
+  "files": ["dist"],
   "sideEffects": false,
   "options": {
     "mocha": "--require scripts/mocha_runner ./tests/**/*.js ./tests/*.js"
@@ -41,9 +33,10 @@
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
     "storybook": "start-storybook -p 6006",
     "flow": "flow",
-    "precommit": "npm run test",
+    "precommit": "npm run lint",
     "prepush": "npm run test",
-    "coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --compilers js:babel-register tests/**/*.js"
+    "coverage":
+      "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --compilers js:babel-register tests/**/*.js"
   },
   "devDependencies": {
     "@storybook/react": "^3.1.9",

src/index.js

@@ -10,16 +10,15 @@ export { default as List } from './stylized/ListStyle'
 export { default as BulletList } from './stylized/BulletListStyle'
 
 export type Props = {
-  style: { [key: string]: any },
-  type: string,
   animate: boolean,
   speed: number,
+  className: string,
   width: number,
   height: number,
+  preserveAspectRatio: string,
   primaryColor: string,
   secondaryColor: string,
-  preserveAspectRatio: string,
-  className: string,
+  style: { [key: string]: any },
   uniquekey: string,
 }
 
@@ -28,9 +27,9 @@ export const defaultProps = {
   speed: 2,
   width: 400,
   height: 130,
+  preserveAspectRatio: 'xMidYMid meet',
   primaryColor: '#f0f0f0',
   secondaryColor: '#e0e0e0',
-  preserveAspectRatio: 'xMidYMid meet',
 }
 
 const InitialComponent = props => (