react-spinners - npm Package Compare versions

Comparing version 0.7.0-alpha.3 to 0.7.0-alpha.4

CHANGELOG.md

@@ -5,2 +5,8 @@ # Change Log
 
+## 0.7.0-alpha.4
+
+- update default value for `css` prop on README to be `""` instead of `{}`
+- add list of available color words that the `color` prop accepts.
+- run prettier to format readme
+
 ## 0.7.0-alpha.3
@@ -7,0 +13,0 @@

package.json

 {
   "name": "react-spinners",
-  "version": "0.7.0-alpha.3",
+  "version": "0.7.0-alpha.4",
   "description": "A collection of react loading spinners",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -36,3 +36,3 @@ # React Spinners
 
-**IMPORTANT**: This package uses [emotion](https://github.com/emotion-js/emotion). Remember to add the plugin to `.babelrc`, for example: 
+**IMPORTANT**: This package uses [emotion](https://github.com/emotion-js/emotion). Remember to add the plugin to `.babelrc`, for example:
 
@@ -47,16 +47,16 @@ ```
 ### Examples
- 
+
 ```js
-import React from 'react';
-import { css } from '@emotion/core';
+import React from "react";
+import { css } from "@emotion/core";
 // First way to import
-import { ClipLoader } from 'react-spinners';
+import { ClipLoader } from "react-spinners";
 // Another way to import. This is recommended to reduce bundle size
-import ClipLoader from 'react-spinners/ClipLoader';
+import ClipLoader from "react-spinners/ClipLoader";
 
 // Can be a string as well. Need to ensure each key-value pair ends with ;
 const override = css`
-    display: block;
-    margin: 0 auto;
-    border-color: red;
+  display: block;
+  margin: 0 auto;
+  border-color: red;
 `;
@@ -69,15 +69,16 @@
       loading: true
-    }
+    };
   }
+
   render() {
     return (
-      <div className='sweet-loading'>
+      <div className="sweet-loading">
         <ClipLoader
           css={override}
           size={150} // or 150px
-          color={'#123abc'}
+          color={"#123abc"}
           loading={this.state.loading}
         />
-      </div> 
-    )
+      </div>
+    );
   }
@@ -92,10 +93,16 @@ }
 ```js
-loading: true
-color: '#000000'
-css: {}
+loading: true;
+color: "#000000";
+css: "";
 ```
+
+Color prop accepts a color hash. It also accepts basic colors. This is the list of colors accepted:
+
+> maroon, red, orange, yellow, olive, green, purple, white,
+> fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
+
 Note:
 `css` works exactly like the `css` works with the emotion package.
 You can directly write your css in css syntax without the dirty camelCase css in jss syntax.
-We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream! 
+We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream!
 More info about using `css` [here](https://emotion.sh/docs/introduction)
@@ -105,3 +112,3 @@
 
-- If value is number, the loader will default to css unit `px`. 
+- If value is number, the loader will default to css unit `px`.
 - If value is string, the loader will verify the unit against valid css units.
@@ -111,23 +118,22 @@ - If unit is valid, return the original value
 
-
-|            Loader |   size   |   height   |   width   |   radius   |  margin    |
-| ----------------: | :------: | :--------: | :-------: | :--------: | :--------: |
-|         BarLoader |          |    `4`     |   `100`   |            |
-|        BeatLoader |   `15`   |            |           |            |    `2`     |
-|      BounceLoader |   `60`   |            |           |            |
-|      CircleLoader |   `50`   |            |           |            |
-|        ClipLoader |   `35`   |            |           |            |
-| ClimbingBoxLoader |   `15`   |            |           |            |
-|         DotLoader |   `60`   |            |           |            |    `2`     |
-|        FadeLoader |          |    `15`    |    `5`    |    `2`     |    `2`     |
-|        GridLoader |   `15`   |            |           |            |
-|        HashLoader |   `50`   |            |           |            |    `2`     |
-|        MoonLoader |   `60`   |            |           |            |    `2`     |
-|      PacmanLoader |   `25`   |            |           |            |    `2`     |
-|   PropagateLoader |   `15`   |            |           |            |
-|       PulseLoader |   `15`   |            |           |            |    `2`     |
-|        RingLoader |   `60`   |            |           |            |    `2`     |
-|        RiseLoader |   `15`   |            |           |            |    `2`     |
-|      RotateLoader |   `15`   |            |           |            |    `2`     |
-|       ScaleLoader |          |    `35`    |    `4`    |    `2`     |    `2`     |
-|        SyncLoader |   `15`   |            |           |            |    `2`     |
+|            Loader | size | height | width | radius | margin |
+| ----------------: | :--: | :----: | :---: | :----: | :----: |
+|         BarLoader |      |  `4`   | `100` |        |
+|        BeatLoader | `15` |        |       |        |  `2`   |
+|      BounceLoader | `60` |        |       |        |
+|      CircleLoader | `50` |        |       |        |
+|        ClipLoader | `35` |        |       |        |
+| ClimbingBoxLoader | `15` |        |       |        |
+|         DotLoader | `60` |        |       |        |  `2`   |
+|        FadeLoader |      |  `15`  |  `5`  |  `2`   |  `2`   |
+|        GridLoader | `15` |        |       |        |
+|        HashLoader | `50` |        |       |        |  `2`   |
+|        MoonLoader | `60` |        |       |        |  `2`   |
+|      PacmanLoader | `25` |        |       |        |  `2`   |
+|   PropagateLoader | `15` |        |       |        |
+|       PulseLoader | `15` |        |       |        |  `2`   |
+|        RingLoader | `60` |        |       |        |  `2`   |
+|        RiseLoader | `15` |        |       |        |  `2`   |
+|      RotateLoader | `15` |        |       |        |  `2`   |
+|       ScaleLoader |      |  `35`  |  `4`  |  `2`   |  `2`   |
+|        SyncLoader | `15` |        |       |        |  `2`   |

No alert changes

Improved metrics

Total package byte prevSize

134394

increased by0.01%

Number of lines in readme file

134

increased by4.69%

No dependency changes