add size option to ring component and update readme with a nice table of component with props

Author: JoshK2

README.md

@@ -11,26 +11,27 @@ Amazing collection of pure CSS react spinners components of css spinners for aja
   <a href="https://bit.dev/joshk/react-spinners-css"><img src="https://i.imagesup.co/images2/010e655fd10abc5621d067f8b8ad33c7cac7d840.gif"></a>
 </p>
 
-## 🚀 List of components
+## 🚀 List of Spinners - PropTypes and Default Props
 
-- `<Circle />`
-- `<Default />`
-- `<DualRing />`
-- `<Ellipsis />`
-- `<Facebook />`
-- `<Grid />`
-- `<Heart />`
-- `<Hourglass />`
-- `<Ring />`
-- `<Ripple />`
-- `<Roller />`  
-- `<Spinner />`
+Each component accepts a `color` prop, and few accepts also `size` prop.
+The default `color` prop is `#7f58af`.
+Component that accepts `size` prop have a default size in pixel.
 
-#### Props
+| Spinner          | Color: string | Size: number  |
+| ---------------- | ------------  | ------------- |
+| Circle Spinner   | `#7f58af`     | `64px`        |
+| Default Spinner  | `#7f58af`     | -             |
+| DualRing Spinner | `#7f58af`     | -             |
+| Ellipsis Spinner | `#7f58af`     | -             |
+| Facebook Spinner | `#7f58af`     | -             |
+| Grid Spinner     | `#7f58af`     | -             |
+| Heart Spinner    | `#7f58af`     | -             |
+| Hourglass Spinner| `#7f58af`     | -             |
+| Ring Spinner     | `#7f58af`     | `80px`        |
+| Ripple Spinner   | `#7f58af`     | -             |
+| Roller Spinner   | `#7f58af`     | -             |
+| Spinner Spinner  | `#7f58af`     | -             |
 
-| Prop    | Type     | Default |
-| ------- | -------- | ------- |
-| `color` | `string` | `#7f58af`  |
 
 ## 📦 Installation
 ### Using [npm](https://www.npmjs.com/package/react-spinners-css) to install react-spinners-css:  

src/app.css

@@ -7,6 +7,8 @@
     float: left;
     border: 1px solid #ccc;
     border-radius: 3px;
+    width: 240px;
+    height: 84px;
     margin: 10px;
     padding: 10px;
 }

src/components/Ring/index.js

@@ -4,23 +4,28 @@ import './style.css'
 
 export default class Ring extends Component {
     Circles = () => {
+        const { color, size } = this.props;
         let div = []
         for (let index = 0; index < 4; index++) {
-            div.push(<div key={index} style={{ borderColor: `${this.props.color} transparent transparent transparent` }}></div>)
+            div.push(<div key={index} style={{ borderColor: `${color} transparent transparent transparent`, width: size * 0.8, height: size * 0.8, margin: size * 0.1, borderWidth: size * 0.1 }}></div>)
         }
         return div;
     }
 
     render() {
-        return <div className="lds-ring">{this.Circles()}</div>
+        const { size } = this.props;
+        return <div className="lds-ring" style={{ width: size, height: size }}>{this.Circles()}</div>
     }
 }
 
 Ring.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** size in pixel */
+    size: PropTypes.number,
 }
 
 Ring.defaultProps = {
     color: '#7f58af',
+    size: 80,
 }

src/components/Ring/style.css

@@ -1,16 +1,11 @@
 .lds-ring {
     display: inline-block;
     position: relative;
-    width: 80px;
-    height: 80px;
   }
   .lds-ring div {
     box-sizing: border-box;
     display: block;
     position: absolute;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
     border: 8px solid #fff;
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

src/index.js

@@ -16,10 +16,10 @@ import {
 } from './components'
 import './app.css'
 
-const App = () => {
+const ColorProp = () => {
     return (
         <div className="main">
-            <h1>React Spinners</h1>
+            <h2>Color Property</h2>
             <div className="block">
                 <Circle color="black" />
                 <Circle color="#de3541" />
@@ -85,4 +85,33 @@ const App = () => {
     )
 }
 
+const SizeProp = () => {
+    return (
+        <div className="main">
+            <h2>Size Property</h2>
+            <div className="block">
+                <Circle />
+                <Circle size={32} />
+                <Circle size={16} />
+            </div>
+            <div className="block">
+                <Ring />
+                <Ring size={40} />
+                <Ring size={20} />
+            </div>
+            <div style={{ clear: 'both' }}></div>
+        </div>
+    )
+}
+
+const App = () => {
+    return (
+        <div className="main">
+            <h1>React Spinners</h1>
+            <ColorProp />
+            <SizeProp />
+        </div>
+    )
+}
+
 ReactDOM.render(<App />, document.getElementById('root'))