react-spinners-css - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/Circle/index.js

@@ -37,3 +37,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Circle.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Default/index.js

@@ -58,3 +58,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Default.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/DualRing/index.js

@@ -39,3 +39,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 DualRing.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Ellipsis/index.js

@@ -58,3 +58,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Ellipsis.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Facebook/index.js

@@ -62,5 +62,5 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 
+export { Facebook as default };
 Facebook.defaultProps = {
-  color: '#fff'
-};
-export { Facebook as default };
+  color: '#7f58af'
+};

dist/Grid/index.js

@@ -58,3 +58,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Grid.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Heart/index.js

@@ -48,3 +48,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Heart.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Hourglass/index.js

@@ -39,3 +39,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Hourglass.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/index.js

@@ -1,13 +0,13 @@
-import Circle from "./Circle";
-import Default from "./Default";
-import DualRing from "./DualRing";
-import Ellipsis from "./Ellipsis";
-import Facebook from "./Facebook";
-import Grid from "./Grid";
-import Heart from "./Heart";
-import Hourglass from "./Hourglass";
-import Ring from "./Ring";
-import Ripple from "./Ripple";
-import Roller from "./Roller";
-import Spinner from "./Spinner";
+import Circle from './Circle';
+import Default from './Default';
+import DualRing from './DualRing';
+import Ellipsis from './Ellipsis';
+import Facebook from './Facebook';
+import Grid from './Grid';
+import Heart from './Heart';
+import Hourglass from './Hourglass';
+import Ring from './Ring';
+import Ripple from './Ripple';
+import Roller from './Roller';
+import Spinner from './Spinner';
 export { Circle, Default, DualRing, Ellipsis, Facebook, Grid, Heart, Hourglass, Ring, Ripple, Roller, Spinner };

dist/Ring/index.js

@@ -58,3 +58,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Ring.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Ripple/index.js

@@ -58,3 +58,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Ripple.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Roller/index.js

@@ -59,3 +59,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Roller.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

dist/Spinner/index.js

@@ -59,3 +59,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 Spinner.defaultProps = {
-  color: '#fff'
+  color: '#7f58af'
 };

package.json

 {
   "name": "react-spinners-css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
@@ -33,3 +33,4 @@ "main": "dist/index.js",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\""
   },
@@ -48,2 +49,3 @@ "eslintConfig": {
     "@bit/joshk.jotils.get-random-color": "^2.0.8",
+    "prettier": "^1.18.2",
     "react": "^16.8.6",
@@ -50,0 +52,0 @@ "react-dom": "^16.8.6",

README.md

@@ -1,49 +0,24 @@
-# react-spinners-css [![npm module](https://badge.fury.io/js/react-spinners-css.svg)](https://www.npmjs.com/package/react-spinners-css) [![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponents&url=https%3A%2F%2Fapi.bitsrc.io%2Fscope%2Fjoshk%2Freact-spinners-css)](https://bit.dev/joshk/react-spinners-css)
+# react-spinners-css 
+[![npm module](https://badge.fury.io/js/react-spinners-css.svg)](https://www.npmjs.com/package/react-spinners-css)
+[![GitHub stars](https://img.shields.io/github/stars/joshk2/react-spinners-css)](https://github.com/JoshK2/react-spinners-css/stargazers)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/react-spinners-css/master/LICENSE)
+[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)
 
-Amazing css spinner for ajax or loading animation from loading.io.  
-What is this project?  
-I see that [loadingio pure css](https://loading.io/css/) is only [built](https://github.com/loadingio/css-spinner) for normal HTML website, and I want to use it for some React project, so I decide to take this project and convert it to React components library and add some features like a color option for each spinner.
+Amazing collection of react spinners components of css spinners for ajax or loading animation based on loading.io.  
 
-## Install loading io spinner for React with npm
-Run the following command:
-```bash
-npm install react-spinners-css
-```  
-## Play and install loading io spinner for React with Bit
-Using [bit](https://bit.dev/joshk/react-spinners-css) to play with live demo, and try loading io spinner before install.
+## List of components
 
-<p align="center">
-  <a href="https://bit.dev/joshk/react-spinners-css"><img src="https://i.imagesup.co/images2/10c49b59b69fdc976b5b528469cf0acbc52cb44d.gif"></a>
-</p>
+- `<Circle />`
+- `<Default />`
+- `<DualRing />`
+- `<Ellipsis />`
+- `<Facebook />`
+- `<Grid />`
+- `<Heart />`
+- `<Hourglass />`
+- `<Ring />`
+- `<Ripple />`
+- `<Roller />`  
+- `<Spinner />`
 
-### Install specific loadingio spinner component with bit using npm or yarn without having to install the whole project
-
-set npm regisetry config(one time action):
-```bash
-npm config set '@bit:registry' https://node.bit.dev
-```
-and use your favorite package manager:
-```bash
-bit import joshk.react-spinners-css/ripple 
-npm i @bit/joshk.react-spinners-css.ripple
-yarn add @bit/joshk.react-spinners-css.ripple
-```  
-
-## API
-
-### Components
-
-- `<Circle/>`
-- `<Default/>`
-- `<DualRing/>`
-- `<Ellipsis/>`
-- `<Facebook/>`
-- `<Grid/>`
-- `<Heart/>`
-- `<Hourglass/>`
-- `<Ring/>`
-- `<Ripple/>`
-- `<Roller/>`  
-- `<Spinner/>`
-
 #### Props
@@ -53,10 +28,16 @@
 | ------- | -------- | ------- |
-| `color` | `string` | `#fff`  |
+| `color` | `string` | `#7f58af`  |
 
+## Installation
+Using [npm](https://www.npmjs.com/package/react-spinners-css) to install react-spinners-css:  
+
+```bash
+$ npm i --save react-spinners-css
+```  
+
 ## Usage Examples
 
-Using [npm](https://www.npmjs.com/package/react-spinners-css), [bit](https://bit.dev/joshk/react-spinners-css):
+Using [npm](https://www.npmjs.com/package/react-spinners-css):
 ```javascript
-import { Roller } from 'react-spinners-css';
-import Ripple from '@bit/joshk.react-spinners-css.ripple';
+import { Circle, Facebook } from "react-spinners-css";
 ...
@@ -66,8 +47,6 @@ render() {
      <div>
-       <Roller /> //default color is white
-       <Roller color="black" />
-       <Roller color="#000" />
-       <Ripple /> //default color is white
-       <Ripple color="black" />
-       <Ripple color="#000" />
+       <Circle /> //default color is #7f58af
+       <Circle color="red" />
+       <Facebook /> //default color is #7f58af
+       <Facebook color="red" />
      </div>
@@ -78,3 +57,17 @@ )
 
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+Please make sure to update tests as appropriate.
+
+**Steps to contribute**
+
+1) Fork the project and clone.
+2) Create spinner folder in this [folder](https://github.com/JoshK2/react-spinners-css/tree/master/src/components), name the folder with upper case, and create index file and css file.
+See example of naming in this folder [folder](https://github.com/JoshK2/react-spinners-css/tree/master/src/components/Circle).
+3) The spinner need to be exported with index file inside the spinner folder, so create index.js file to export your spinner.
+3) Add the spinner in index.js file inside components folder.
+4) Run `npm run build` to generate the build folder folder.
+5) Share with the community by submitting a PR.
+
 ## License
-[MIT](https://choosealicense.com/licenses/mit/)
+[MIT](https://github.com/JoshK2/react-spinners-css/blob/master/LICENSE)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

34214

decreased by-0.05%

Dev dependency count

6

increased by20%

Number of lines in readme file

71

decreased by-8.97%

No dependency changes