From 2a9cf80c2f88d35c817a293c82f4b3de1899e3ab Mon Sep 17 00:00:00 2001
From: Bond <lovedammy77@yahoo.com>
Date: Sat, 26 Sep 2020 06:14:10 +0100
Subject: [PATCH] Update components to remove defaultProps

Newer versions of react would deprecate defaultProps for function components
---
 src/components/AtomSpinner.js                 |  38 ++---
 src/components/BreedingRhombusSpinner.js      |  62 ++++----
 src/components/CirclesToRhombusesSpinner.js   |  38 ++---
 src/components/FingerprintSpinner.js          |  70 ++++-----
 src/components/FlowerSpinner.js               | 143 +++++++++---------
 .../FulfillingBouncingCircleSpinner.js        |  42 +++--
 src/components/FulfillingSquareSpinner.js     |  28 ++--
 src/components/HalfCircleSpinner.js           |  30 ++--
 src/components/HollowDotsSpinner.js           |  36 ++---
 src/components/IntersectingCirclesSpinner.js  |  48 +++---
 src/components/LoopingRhombusesSpinner.js     |  36 ++---
 src/components/OrbitSpinner.js                |  32 ++--
 src/components/PixelSpinner.js                |  93 ++++++------
 src/components/RadarSpinner.js                |  44 +++---
 src/components/ScalingSquaresSpinner.js       |  31 ++--
 src/components/SelfBuildingSquareSpinner.js   |  54 +++----
 src/components/SemipolarSpinner.js            | 100 ++++++------
 src/components/SpringSpinner.js               |  46 +++---
 src/components/SwappingSquaresSpinner.js      |  34 ++---
 src/components/TrinityRingsSpinner.js         |  40 ++---
 20 files changed, 462 insertions(+), 583 deletions(-)

diff --git a/src/components/AtomSpinner.js b/src/components/AtomSpinner.js
index 596d792..835f732 100644
--- a/src/components/AtomSpinner.js
+++ b/src/components/AtomSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Atom = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   overflow: hidden;
 
   * {
@@ -21,8 +21,8 @@ const Atom = styled.div`
   .spinner-circle {
     display: block;
     position: absolute;
-    color: ${props => props.color};
-    font-size: calc(${props => props.size}px * 0.24);
+    color: ${(props) => props.color};
+    font-size: calc(${(props) => props.size}px * 0.24);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -33,29 +33,29 @@ const Atom = styled.div`
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    animation-duration: ${props => props.animationDuration}ms;
-    border-left-width: calc(${props => props.size}px / 25);
-    border-top-width: calc(${props => props.size}px / 25);
-    border-left-color: ${props => props.color};
+    animation-duration: ${(props) => props.animationDuration}ms;
+    border-left-width: calc(${(props) => props.size}px / 25);
+    border-top-width: calc(${(props) => props.size}px / 25);
+    border-left-color: ${(props) => props.color};
     border-left-style: solid;
     border-top-style: solid;
     border-top-color: transparent;
   }
 
   .spinner-line:nth-child(1) {
-    animation: atom-spinner-animation-1 ${props => props.animationDuration}ms
+    animation: atom-spinner-animation-1 ${(props) => props.animationDuration}ms
       linear infinite;
     transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
   }
 
   .spinner-line:nth-child(2) {
-    animation: atom-spinner-animation-2 ${props => props.animationDuration}ms
+    animation: atom-spinner-animation-2 ${(props) => props.animationDuration}ms
       linear infinite;
     transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
   }
 
   .spinner-line:nth-child(3) {
-    animation: atom-spinner-animation-3 ${props => props.animationDuration}ms
+    animation: atom-spinner-animation-3 ${(props) => props.animationDuration}ms
       linear infinite;
     transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
   }
@@ -85,18 +85,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 60,
-  color: 'red',
-  animationDuration: 1000,
-  className: '',
-};
-
 export const AtomSpinner = ({
-  size,
-  animationDuration,
-  color,
-  className,
+  size = 60,
+  animationDuration = 1000,
+  color = '#fff',
+  className = '',
   style,
   ...props
 }) => (
@@ -119,6 +112,5 @@ export const AtomSpinner = ({
 );
 
 AtomSpinner.propTypes = propTypes;
-AtomSpinner.defaultProps = defaultProps;
 
 export default AtomSpinner;
diff --git a/src/components/BreedingRhombusSpinner.js b/src/components/BreedingRhombusSpinner.js
index 44dcaa6..8f8584b 100644
--- a/src/components/BreedingRhombusSpinner.js
+++ b/src/components/BreedingRhombusSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const BreedingSpinner = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
   transform: rotate(45deg);
 
@@ -13,12 +13,12 @@ const BreedingSpinner = styled.div`
   }
 
   .rhombus {
-    height: calc(${props => props.size}px / 7.5);
-    width: calc(${props => props.size}px / 7.5);
-    animation-duration: ${props => props.animationDuration}ms;
-    top: calc(${props => props.size}px / 2.3077);
-    left: calc(${props => props.size}px / 2.3077);
-    background-color: ${props => props.color};
+    height: calc(${(props) => props.size}px / 7.5);
+    width: calc(${(props) => props.size}px / 7.5);
+    animation-duration: ${(props) => props.animationDuration}ms;
+    top: calc(${(props) => props.size}px / 2.3077);
+    left: calc(${(props) => props.size}px / 2.3077);
+    background-color: ${(props) => props.color};
     position: absolute;
     animation-iteration-count: infinite;
   }
@@ -29,53 +29,53 @@ const BreedingSpinner = styled.div`
 
   .rhombus.child-1 {
     animation-name: breeding-rhombus-spinner-animation-child-1;
-    animation-delay: calc(${props => props.delayModifier}ms * 1);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 1);
   }
 
   .rhombus.child-2 {
     animation-name: breeding-rhombus-spinner-animation-child-2;
-    animation-delay: calc(${props => props.delayModifier}ms * 2);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 2);
   }
 
   .rhombus.child-3 {
     animation-name: breeding-rhombus-spinner-animation-child-3;
-    animation-delay: calc(${props => props.delayModifier}ms * 3);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 3);
   }
 
   .rhombus.child-4 {
     animation-name: breeding-rhombus-spinner-animation-child-4;
-    animation-delay: calc(${props => props.delayModifier}ms * 4);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 4);
   }
 
   .rhombus.child-5 {
     animation-name: breeding-rhombus-spinner-animation-child-5;
-    animation-delay: calc(${props => props.delayModifier}ms * 5);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 5);
   }
 
   .rhombus.child-6 {
     animation-name: breeding-rhombus-spinner-animation-child-6;
-    animation-delay: calc(${props => props.delayModifier}ms * 6);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 6);
   }
 
   .rhombus.child-7 {
     animation-name: breeding-rhombus-spinner-animation-child-7;
-    animation-delay: calc(${props => props.delayModifier}ms * 7);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 7);
   }
 
   .rhombus.child-8 {
     animation-name: breeding-rhombus-spinner-animation-child-8;
-    animation-delay: calc(${props => props.delayModifier}ms * 8);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 8);
   }
 
   .rhombus.big {
-    height: calc(${props => props.size}px / 3);
-    width: calc(${props => props.size}px / 3);
-    animation-duration: ${props => props.animationDuration}ms;
-    top: calc(${props => props.size}px / 3);
-    left: calc(${props => props.size}px / 3);
-    background-color: ${props => props.color};
+    height: calc(${(props) => props.size}px / 3);
+    width: calc(${(props) => props.size}px / 3);
+    animation-duration: ${(props) => props.animationDuration}ms;
+    top: calc(${(props) => props.size}px / 3);
+    left: calc(${(props) => props.size}px / 3);
+    background-color: ${(props) => props.color};
     animation: breeding-rhombus-spinner-animation-child-big
-      ${props => props.animationDuration} infinite;
+      ${(props) => props.animationDuration} infinite;
     animation-delay: 0.5s;
   }
 
@@ -134,13 +134,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 150,
-  color: '#fff',
-  animationDuration: 2000,
-  className: '',
-};
-
 function generateRhombusChildren(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className={`rhombus child-${index + 1}`} />
@@ -148,10 +141,10 @@ function generateRhombusChildren(num) {
 }
 
 const BreedingRhombusSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 150,
+  color = '#fff',
+  animationDuration = 2000,
+  className = '',
   style,
   ...props
 }) => (
@@ -170,6 +163,5 @@ const BreedingRhombusSpinner = ({
 );
 
 BreedingRhombusSpinner.propTypes = propTypes;
-BreedingRhombusSpinner.defaultProps = defaultProps;
 
 export default BreedingRhombusSpinner;
diff --git a/src/components/CirclesToRhombusesSpinner.js b/src/components/CirclesToRhombusesSpinner.js
index de8d7ed..76f429e 100644
--- a/src/components/CirclesToRhombusesSpinner.js
+++ b/src/components/CirclesToRhombusesSpinner.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const CircleRhombus = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => (props.size + props.circleMarginLeft) * props.circleNum}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) =>
+    (props.size + props.circleMarginLeft) * props.circleNum}px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,26 +15,26 @@ const CircleRhombus = styled.div`
   }
 
   .circle {
-    height: ${props => props.size}px;
-    width: ${props => props.size}px;
-    margin-left: ${props => props.circleMarginLeft}px;
+    height: ${(props) => props.size}px;
+    width: ${(props) => props.size}px;
+    margin-left: ${(props) => props.circleMarginLeft}px;
     transform: rotate(45deg);
     border-radius: 10%;
-    border: 3px solid ${props => props.color};
+    border: 3px solid ${(props) => props.color};
     overflow: hidden;
     background: transparent;
     animation: circles-to-rhombuses-animation
-      ${props => props.animationDuration}ms linear infinite;
+      ${(props) => props.animationDuration}ms linear infinite;
   }
   .circle:nth-child(1) {
-    animation-delay: calc(${props => props.delay}ms * 1);
+    animation-delay: calc(${(props) => props.delay}ms * 1);
     margin-left: 0;
   }
   .circle:nth-child(2) {
-    animation-delay: calc(${props => props.delay}ms * 2);
+    animation-delay: calc(${(props) => props.delay}ms * 2);
   }
   .circle:nth-child(3) {
-    animation-delay: calc(${props => props.delay}ms * 3);
+    animation-delay: calc(${(props) => props.delay}ms * 3);
   }
   @keyframes circles-to-rhombuses-animation {
     0% {
@@ -62,13 +63,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 15,
-  color: '#fff',
-  animationDuration: 1200,
-  className: '',
-};
-
 function generateRhombusChildren(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="circle" />
@@ -76,10 +70,10 @@ function generateRhombusChildren(num) {
 }
 
 const CirclesToRhombusesSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 15,
+  color = '#fff',
+  animationDuration = 1200,
+  className = '',
   style,
   ...props
 }) => {
@@ -105,7 +99,7 @@ const CirclesToRhombusesSpinner = ({
     </CircleRhombus>
   );
 };
+
 CirclesToRhombusesSpinner.propTypes = propTypes;
-CirclesToRhombusesSpinner.defaultProps = defaultProps;
 
 export default CirclesToRhombusesSpinner;
diff --git a/src/components/FingerprintSpinner.js b/src/components/FingerprintSpinner.js
index 23c7bb2..23d2f36 100644
--- a/src/components/FingerprintSpinner.js
+++ b/src/components/FingerprintSpinner.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
 
 const RingSpinner = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
-  padding: ${props => props.containerPadding}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
+  padding: ${(props) => props.containerPadding}px;
   overflow: hidden;
   position: relative;
 
@@ -17,9 +17,9 @@ const RingSpinner = styled.div`
     position: absolute;
     border-radius: 50%;
     border: 2px solid transparent;
-    border-top-color: ${props => props.color};
+    border-top-color: ${(props) => props.color};
     animation: fingerprint-spinner-animation
-      ${props => props.animationDuration}ms
+      ${(props) => props.animationDuration}ms
       cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards;
     margin: auto;
     bottom: 0;
@@ -28,48 +28,48 @@ const RingSpinner = styled.div`
     top: 0;
   }
   .spinner-ring:nth-child(1) {
-    height: ${props => props.ringBase + 0 * props.ringBase}px;
-    width: ${props => props.ringBase + 0 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 0 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 0 * props.ringBase}px;
     animation-delay: calc(50ms * 1);
   }
   .spinner-ring:nth-child(2) {
-    height: ${props => props.ringBase + 1 * props.ringBase}px;
-    width: ${props => props.ringBase + 1 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 1 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 1 * props.ringBase}px;
     animation-delay: calc(50ms * 2);
   }
   .spinner-ring:nth-child(3) {
-    height: ${props => props.ringBase + 2 * props.ringBase}px;
-    width: ${props => props.ringBase + 2 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 2 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 2 * props.ringBase}px;
     animation-delay: calc(50ms * 3);
   }
   .spinner-ring:nth-child(4) {
-    height: ${props => props.ringBase + 3 * props.ringBase}px;
-    width: ${props => props.ringBase + 3 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 3 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 3 * props.ringBase}px;
     animation-delay: calc(50ms * 4);
   }
   .spinner-ring:nth-child(5) {
-    height: ${props => props.ringBase + 4 * props.ringBase}px;
-    width: ${props => props.ringBase + 4 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 4 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 4 * props.ringBase}px;
     animation-delay: calc(50ms * 5);
   }
   .spinner-ring:nth-child(6) {
-    height: ${props => props.ringBase + 5 * props.ringBase}px;
-    width: ${props => props.ringBase + 5 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 5 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 5 * props.ringBase}px;
     animation-delay: calc(50ms * 6);
   }
   .spinner-ring:nth-child(7) {
-    height: ${props => props.ringBase + 6 * props.ringBase}px;
-    width: ${props => props.ringBase + 6 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 6 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 6 * props.ringBase}px;
     animation-delay: calc(50ms * 7);
   }
   .spinner-ring:nth-child(8) {
-    height: ${props => props.ringBase + 7 * props.ringBase}px;
-    width: ${props => props.ringBase + 7 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 7 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 7 * props.ringBase}px;
     animation-delay: calc(50ms * 8);
   }
   .spinner-ring:nth-child(9) {
-    height: ${props => props.ringBase + 8 * props.ringBase}px;
-    width: ${props => props.ringBase + 8 * props.ringBase}px;
+    height: ${(props) => props.ringBase + 8 * props.ringBase}px;
+    width: ${(props) => props.ringBase + 8 * props.ringBase}px;
     animation-delay: calc(50ms * 9);
   }
 
@@ -88,13 +88,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 60,
-  color: '#fff',
-  animationDuration: 1500,
-  className: '',
-};
-
 function generateRings(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="spinner-ring" />
@@ -102,10 +95,10 @@ function generateRings(num) {
 }
 
 const FingerprintSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 60,
+  color = "#fff",
+  animationDuration = 1500,
+  className = "",
   style,
   ...props
 }) => {
@@ -119,7 +112,7 @@ const FingerprintSpinner = ({
       size={size}
       color={color}
       animationDuration={animationDuration}
-      className={`fingerprint-spinner${className ? ' ' + className : ''}`}
+      className={`fingerprint-spinner${className ? " " + className : ""}`}
       style={style}
       ringBase={ringBase}
       containerPadding={containerPadding}
@@ -131,6 +124,5 @@ const FingerprintSpinner = ({
 };
 
 FingerprintSpinner.propTypes = propTypes;
-FingerprintSpinner.defaultProps = defaultProps;
 
 export default FingerprintSpinner;
diff --git a/src/components/FlowerSpinner.js b/src/components/FlowerSpinner.js
index 71887fe..0ddae0b 100644
--- a/src/components/FlowerSpinner.js
+++ b/src/components/FlowerSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Flower = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -15,102 +15,105 @@ const Flower = styled.div`
   }
 
   .dots-container {
-    height: ${props => props.dotSize}px;
-    width: ${props => props.dotSize}px;
+    height: ${(props) => props.dotSize}px;
+    width: ${(props) => props.dotSize}px;
   }
   .smaller-dot {
-    background: ${props => props.color};
+    background: ${(props) => props.color};
     height: 100%;
     width: 100%;
     border-radius: 50%;
     animation: flower-spinner-smaller-dot-animation
-      ${props => props.animationDuration}ms 0s infinite both;
+      ${(props) => props.animationDuration}ms 0s infinite both;
   }
   .bigger-dot {
-    background: ${props => props.color};
+    background: ${(props) => props.color};
     height: 100%;
     width: 100%;
     padding: 10%;
     border-radius: 50%;
     animation: flower-spinner-bigger-dot-animation
-      ${props => props.animationDuration}ms 0s infinite both;
+      ${(props) => props.animationDuration}ms 0s infinite both;
   }
   @keyframes flower-spinner-bigger-dot-animation {
     0%,
     100% {
-      box-shadow:
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color};
+      box-shadow: 0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color};
     }
     50% {
       transform: rotate(180deg);
     }
     25%,
     75% {
-      box-shadow:
-        ${props => props.dotSize * 2.6}px 0 0 ${props => props.color},
-        -${props => props.dotSize * 2.6}px 0 0 ${props => props.color},
-        0 ${props => props.dotSize * 2.6}px 0 ${props => props.color},
-        0 -${props => props.dotSize * 2.6}px 0 ${props => props.color},
-        ${props => props.dotSize * 1.9}px -${props => props.dotSize * 1.9}px 0 ${props => props.color},
-        ${props => props.dotSize * 1.9}px ${props => props.dotSize * 1.9}px 0 ${props => props.color},
-        -${props => props.dotSize * 1.9}px -${props => props.dotSize * 1.9}px 0 ${props => props.color},
-        -${props => props.dotSize * 1.9}px ${props => props.dotSize * 1.9}px 0 ${props => props.color};
+      box-shadow: ${(props) => props.dotSize * 2.6}px 0 0
+          ${(props) => props.color},
+        -${(props) => props.dotSize * 2.6}px 0 0 ${(props) => props.color},
+        0 ${(props) => props.dotSize * 2.6}px 0 ${(props) => props.color},
+        0 -${(props) => props.dotSize * 2.6}px 0 ${(props) => props.color},
+        ${(props) => props.dotSize * 1.9}px -${(props) => props.dotSize * 1.9}px
+          0 ${(props) => props.color},
+        ${(props) => props.dotSize * 1.9}px ${(props) => props.dotSize * 1.9}px
+          0 ${(props) => props.color},
+        -${(props) => props.dotSize * 1.9}px -${(props) =>
+            props.dotSize * 1.9}px
+          0 ${(props) => props.color},
+        -${(props) => props.dotSize * 1.9}px ${(props) => props.dotSize * 1.9}px
+          0 ${(props) => props.color};
     }
     100% {
       transform: rotate(360deg);
-      box-shadow:
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color};
+      box-shadow: 0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color};
     }
   }
   @keyframes flower-spinner-smaller-dot-animation {
     0%,
     100% {
-      box-shadow:
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color};
+      box-shadow: 0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color};
     }
     25%,
     75% {
-      box-shadow:
-        ${props => props.dotSize * 1.4}px 0 0 ${props => props.color},
-        -${props => props.dotSize * 1.4}px 0 0 ${props => props.color},
-        0 ${props => props.dotSize * 1.4}px 0 ${props => props.color},
-        0 -${props => props.dotSize * 1.4}px 0 ${props => props.color},
-        ${props => props.dotSize}px -${props => props.dotSize}px 0 ${props => props.color},
-        ${props => props.dotSize}px ${props => props.dotSize}px 0 ${props => props.color},
-        -${props => props.dotSize}px -${props => props.dotSize}px 0 ${props => props.color},
-        -${props => props.dotSize}px ${props => props.dotSize}px 0 ${props => props.color};
+      box-shadow: ${(props) => props.dotSize * 1.4}px 0 0
+          ${(props) => props.color},
+        -${(props) => props.dotSize * 1.4}px 0 0 ${(props) => props.color},
+        0 ${(props) => props.dotSize * 1.4}px 0 ${(props) => props.color},
+        0 -${(props) => props.dotSize * 1.4}px 0 ${(props) => props.color},
+        ${(props) => props.dotSize}px -${(props) => props.dotSize}px 0 ${(props) => props.color},
+        ${(props) => props.dotSize}px ${(props) => props.dotSize}px 0
+          ${(props) => props.color},
+        -${(props) => props.dotSize}px -${(props) => props.dotSize}px 0
+          ${(props) => props.color},
+        -${(props) => props.dotSize}px ${(props) => props.dotSize}px 0 ${(props) => props.color};
     }
     100% {
-      box-shadow:
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color},
-        0px 0px 0px ${props => props.color};
+      box-shadow: 0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color},
+        0px 0px 0px ${(props) => props.color};
     }
   }
 `;
@@ -123,18 +126,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 70,
-  color: '#fff',
-  animationDuration: 2500,
-  className: '',
-};
-
 const FlowerSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 70,
+  color = '#fff',
+  animationDuration = 2500,
+  className = '',
   style,
   ...props
 }) => {
@@ -160,6 +156,5 @@ const FlowerSpinner = ({
 };
 
 FlowerSpinner.propTypes = propTypes;
-FlowerSpinner.defaultProps = defaultProps;
 
 export default FlowerSpinner;
diff --git a/src/components/FulfillingBouncingCircleSpinner.js b/src/components/FulfillingBouncingCircleSpinner.js
index 0b5ca29..2973916 100644
--- a/src/components/FulfillingBouncingCircleSpinner.js
+++ b/src/components/FulfillingBouncingCircleSpinner.js
@@ -3,37 +3,39 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const BouncingCircle = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
   animation: fulfilling-bouncing-circle-spinner-animation infinite
-    ${props => props.animationDuration}ms ease;
+    ${(props) => props.animationDuration}ms ease;
 
   * {
     box-sizing: border-box;
   }
 
   .orbit {
-    height: ${props => props.size}px;
-    width: ${props => props.size}px;
+    height: ${(props) => props.size}px;
+    width: ${(props) => props.size}px;
     position: absolute;
     top: 0;
     left: 0;
     border-radius: 50%;
-    border: calc(${props => props.size}px * 0.03) solid ${props => props.color};
+    border: calc(${(props) => props.size}px * 0.03) solid
+      ${(props) => props.color};
     animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite
-      ${props => props.animationDuration}ms ease;
+      ${(props) => props.animationDuration}ms ease;
   }
   .circle {
-    height: ${props => props.size}px;
-    width: ${props => props.size}px;
-    color: ${props => props.color};
+    height: ${(props) => props.size}px;
+    width: ${(props) => props.size}px;
+    color: ${(props) => props.color};
     display: block;
     border-radius: 50%;
     position: relative;
-    border: calc(${props => props.size}px * 0.1) solid ${props => props.color};
+    border: calc(${(props) => props.size}px * 0.1) solid
+      ${(props) => props.color};
     animation: fulfilling-bouncing-circle-spinner-circle-animation infinite
-      ${props => props.animationDuration}ms ease;
+      ${(props) => props.animationDuration}ms ease;
     transform: rotate(0deg) scale(1);
   }
   @keyframes fulfilling-bouncing-circle-spinner-animation {
@@ -114,18 +116,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 60,
-  color: '#fff',
-  animationDuration: 4000,
-  className: '',
-};
-
 const FulfillingBouncingCircleSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 60,
+  color = '#fff',
+  animationDuration = 4000,
+  className = '',
   style,
   ...props
 }) => (
@@ -145,6 +140,5 @@ const FulfillingBouncingCircleSpinner = ({
 );
 
 FulfillingBouncingCircleSpinner.propTypes = propTypes;
-FulfillingBouncingCircleSpinner.defaultProps = defaultProps;
 
 export default FulfillingBouncingCircleSpinner;
diff --git a/src/components/FulfillingSquareSpinner.js b/src/components/FulfillingSquareSpinner.js
index 56d510b..0875235 100644
--- a/src/components/FulfillingSquareSpinner.js
+++ b/src/components/FulfillingSquareSpinner.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const SquareSpinner = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
-  border: 4px solid ${props => props.color};
+  border: 4px solid ${(props) => props.color};
   animation: fulfilling-square-spinner-animation
-    ${props => props.animationDuration}ms infinite ease;
+    ${(props) => props.animationDuration}ms infinite ease;
 
   * {
     box-sizing: border-box;
@@ -17,11 +17,11 @@ const SquareSpinner = styled.div`
   .spinner-inner {
     vertical-align: top;
     display: inline-block;
-    background-color: ${props => props.color};
+    background-color: ${(props) => props.color};
     width: 100%;
     opacity: 1;
     animation: fulfilling-square-spinner-inner-animation
-      ${props => props.animationDuration}ms infinite ease-in;
+      ${(props) => props.animationDuration}ms infinite ease-in;
   }
 
   @keyframes fulfilling-square-spinner-animation {
@@ -69,18 +69,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 50,
-  color: '#fff',
-  animationDuration: 4000,
-  className: '',
-};
-
 const FulfillingSquareSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 50,
+  color = '#fff',
+  animationDuration = 4000,
+  className = '',
   style,
   ...props
 }) => (
@@ -97,6 +90,5 @@ const FulfillingSquareSpinner = ({
 );
 
 FulfillingSquareSpinner.propTypes = propTypes;
-FulfillingSquareSpinner.defaultProps = defaultProps;
 
 export default FulfillingSquareSpinner;
diff --git a/src/components/HalfCircleSpinner.js b/src/components/HalfCircleSpinner.js
index e4ba470..e23a746 100644
--- a/src/components/HalfCircleSpinner.js
+++ b/src/components/HalfCircleSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const HalfSpinner = styled.div`
-  width: ${props => props.size}px;
-  height: ${props => props.size}px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   border-radius: 100%;
   position: relative;
 
@@ -18,17 +18,17 @@ const HalfSpinner = styled.div`
     width: 100%;
     height: 100%;
     border-radius: 100%;
-    border: calc(${props => props.size}px / 10) solid transparent;
+    border: calc(${(props) => props.size}px / 10) solid transparent;
   }
   .circle.circle-1 {
-    border-top-color: ${props => props.color};
+    border-top-color: ${(props) => props.color};
     animation: half-circle-spinner-animation
-      ${props => props.animationDuration}ms infinite;
+      ${(props) => props.animationDuration}ms infinite;
   }
   .circle.circle-2 {
-    border-bottom-color: ${props => props.color};
+    border-bottom-color: ${(props) => props.color};
     animation: half-circle-spinner-animation
-      ${props => props.animationDuration}ms infinite alternate;
+      ${(props) => props.animationDuration}ms infinite alternate;
   }
   @keyframes half-circle-spinner-animation {
     0% {
@@ -48,18 +48,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 60,
-  color: '#fff',
-  animationDuration: 1000,
-  className: '',
-};
-
 const HalfCircleSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 60,
+  color = '#fff',
+  animationDuration = 1000,
+  className = '',
   style,
   ...props
 }) => (
@@ -77,6 +70,5 @@ const HalfCircleSpinner = ({
 );
 
 HalfCircleSpinner.propTypes = propTypes;
-HalfCircleSpinner.defaultProps = defaultProps;
 
 export default HalfCircleSpinner;
diff --git a/src/components/HollowDotsSpinner.js b/src/components/HollowDotsSpinner.js
index 10689bd..635db7e 100644
--- a/src/components/HollowDotsSpinner.js
+++ b/src/components/HollowDotsSpinner.js
@@ -3,32 +3,32 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const HollowSpinner = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => 2 * props.size * props.dotsNum}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => 2 * props.size * props.dotsNum}px;
 
   * {
     box-sizing: border-box;
   }
 
   .dot {
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
-    margin: 0 calc(${props => props.size}px / 2);
-    border: calc(${props => props.size}px / 5) solid ${props => props.color};
+    width: ${(props) => props.size}px;
+    height: ${(props) => props.size}px;
+    margin: 0 calc(${(props) => props.size}px / 2);
+    border: calc(${(props) => props.size}px / 5) solid ${(props) => props.color};
     border-radius: 50%;
     float: left;
     transform: scale(0);
     animation: hollow-dots-spinner-animation
-      ${props => props.animationDuration}ms ease infinite 0ms;
+      ${(props) => props.animationDuration}ms ease infinite 0ms;
   }
   .dot:nth-child(1) {
-    animation-delay: calc(${props => props.animationDelay}ms * 1);
+    animation-delay: calc(${(props) => props.animationDelay}ms * 1);
   }
   .dot:nth-child(2) {
-    animation-delay: calc(${props => props.animationDelay}ms * 2);
+    animation-delay: calc(${(props) => props.animationDelay}ms * 2);
   }
   .dot:nth-child(3) {
-    animation-delay: calc(${props => props.animationDelay}ms * 3);
+    animation-delay: calc(${(props) => props.animationDelay}ms * 3);
   }
   @keyframes hollow-dots-spinner-animation {
     50% {
@@ -49,13 +49,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 15,
-  color: '#fff',
-  animationDuration: 1000,
-  className: '',
-};
-
 function generateDots(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="dot" />
@@ -63,10 +56,10 @@ function generateDots(num) {
 }
 
 const HollowDotsSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 15,
+  color = '#fff',
+  animationDuration = 1000,
+  className = '',
   style,
   ...props
 }) => {
@@ -90,6 +83,5 @@ const HollowDotsSpinner = ({
 };
 
 HollowDotsSpinner.propTypes = propTypes;
-HollowDotsSpinner.defaultProps = defaultProps;
 
 export default HollowDotsSpinner;
diff --git a/src/components/IntersectingCirclesSpinner.js b/src/components/IntersectingCirclesSpinner.js
index bb695aa..8c6427a 100644
--- a/src/components/IntersectingCirclesSpinner.js
+++ b/src/components/IntersectingCirclesSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const IntersectingCircles = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
   display: flex;
   flex-direction: row;
@@ -17,15 +17,15 @@ const IntersectingCircles = styled.div`
 
   .spinnerBlock {
     animation: intersecting-circles-spinners-animation
-      ${props => props.animationDuration}ms linear infinite;
+      ${(props) => props.animationDuration}ms linear infinite;
     transform-origin: center;
     display: block;
-    height: ${props => props.circleSize}px;
-    width: ${props => props.circleSize}px;
+    height: ${(props) => props.circleSize}px;
+    width: ${(props) => props.circleSize}px;
   }
   .circle {
     display: block;
-    border: 2px solid ${props => props.color};
+    border: 2px solid ${(props) => props.color};
     border-radius: 50%;
     height: 100%;
     width: 100%;
@@ -38,28 +38,28 @@ const IntersectingCircles = styled.div`
     top: 0;
   }
   .circle:nth-child(2) {
-    left: ${props => props.circleSize * -0.36}px;
-    top: ${props => props.circleSize * 0.2}px;
+    left: ${(props) => props.circleSize * -0.36}px;
+    top: ${(props) => props.circleSize * 0.2}px;
   }
   .circle:nth-child(3) {
-    left: ${props => props.circleSize * -0.36}px;
-    top: ${props => props.circleSize * -0.2}px;
+    left: ${(props) => props.circleSize * -0.36}px;
+    top: ${(props) => props.circleSize * -0.2}px;
   }
   .circle:nth-child(4) {
     left: 0;
-    top: ${props => props.circleSize * -0.36}px;
+    top: ${(props) => props.circleSize * -0.36}px;
   }
   .circle:nth-child(5) {
-    left: ${props => props.circleSize * 0.36}px;
-    top: ${props => props.circleSize * -0.2}px;
+    left: ${(props) => props.circleSize * 0.36}px;
+    top: ${(props) => props.circleSize * -0.2}px;
   }
   .circle:nth-child(6) {
-    left: ${props => props.circleSize * 0.36}px;
-    top: ${props => props.circleSize * 0.2}px;
+    left: ${(props) => props.circleSize * 0.36}px;
+    top: ${(props) => props.circleSize * 0.2}px;
   }
   .circle:nth-child(7) {
     left: 0;
-    top: ${props => props.circleSize * 0.36}px;
+    top: ${(props) => props.circleSize * 0.36}px;
   }
   @keyframes intersecting-circles-spinners-animation {
     from {
@@ -79,13 +79,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 70,
-  color: '#fff',
-  animationDuration: 1200,
-  className: '',
-};
-
 function generateCircles(num) {
   return Array.from({ length: num }).map((val, index) => (
     <span key={index} className="circle" />
@@ -93,10 +86,10 @@ function generateCircles(num) {
 }
 
 const IntersectingCirclesSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 70,
+  color = '#fff',
+  animationDuration = 1200,
+  className = '',
   style,
   ...props
 }) => {
@@ -120,6 +113,5 @@ const IntersectingCirclesSpinner = ({
 };
 
 IntersectingCirclesSpinner.propTypes = propTypes;
-IntersectingCirclesSpinner.defaultProps = defaultProps;
 
 export default IntersectingCirclesSpinner;
diff --git a/src/components/LoopingRhombusesSpinner.js b/src/components/LoopingRhombusesSpinner.js
index d49ee35..7a454f6 100644
--- a/src/components/LoopingRhombusesSpinner.js
+++ b/src/components/LoopingRhombusesSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const LoadingRhombus = styled.div`
-  width: ${props => props.size * 4}px;
-  height: ${props => props.size}px;
+  width: ${(props) => props.size * 4}px;
+  height: ${(props) => props.size}px;
   position: relative;
 
   * {
@@ -12,25 +12,25 @@ const LoadingRhombus = styled.div`
   }
 
   .rhombus {
-    height: ${props => props.size}px;
-    width: ${props => props.size}px;
-    background-color: ${props => props.color};
-    left: ${props => props.size * 4}px;
+    height: ${(props) => props.size}px;
+    width: ${(props) => props.size}px;
+    background-color: ${(props) => props.color};
+    left: ${(props) => props.size * 4}px;
     position: absolute;
     margin: 0 auto;
     border-radius: 2px;
     transform: translateY(0) rotate(45deg) scale(0);
     animation: looping-rhombuses-spinner-animation
-      ${props => props.animationDuration}ms linear infinite;
+      ${(props) => props.animationDuration}ms linear infinite;
   }
   .rhombus:nth-child(1) {
-    animation-delay: calc(${props => props.animationDuration}ms * 1 / -1.5);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 1 / -1.5);
   }
   .rhombus:nth-child(2) {
-    animation-delay: calc(${props => props.animationDuration}ms * 2 / -1.5);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 2 / -1.5);
   }
   .rhombus:nth-child(3) {
-    animation-delay: calc(${props => props.animationDuration}ms * 3 / -1.5);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 3 / -1.5);
   }
   @keyframes looping-rhombuses-spinner-animation {
     0% {
@@ -53,13 +53,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 15,
-  color: '#fff',
-  animationDuration: 2500,
-  className: '',
-};
-
 function generateSpinners(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="rhombus" />
@@ -67,10 +60,10 @@ function generateSpinners(num) {
 }
 
 const LoopingRhombusesSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 15,
+  color = '#fff',
+  animationDuration = 2500,
+  className = '',
   style,
   ...props
 }) => {
@@ -91,6 +84,5 @@ const LoopingRhombusesSpinner = ({
 };
 
 LoopingRhombusesSpinner.propTypes = propTypes;
-LoopingRhombusesSpinner.defaultProps = defaultProps;
 
 export default LoopingRhombusesSpinner;
diff --git a/src/components/OrbitSpinner.js b/src/components/OrbitSpinner.js
index 5edaa62..51f52c0 100644
--- a/src/components/OrbitSpinner.js
+++ b/src/components/OrbitSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Orbit = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   border-radius: 50%;
   perspective: 800px;
 
@@ -23,22 +23,22 @@ const Orbit = styled.div`
     left: 0%;
     top: 0%;
     animation: orbit-spinner-orbit-one-animation
-      ${props => props.animationDuration}ms linear infinite;
-    border-bottom: 3px solid ${props => props.color};
+      ${(props) => props.animationDuration}ms linear infinite;
+    border-bottom: 3px solid ${(props) => props.color};
   }
   .orbit:nth-child(2) {
     right: 0%;
     top: 0%;
     animation: orbit-spinner-orbit-two-animation
-      ${props => props.animationDuration}ms linear infinite;
-    border-right: 3px solid ${props => props.color};
+      ${(props) => props.animationDuration}ms linear infinite;
+    border-right: 3px solid ${(props) => props.color};
   }
   .orbit:nth-child(3) {
     right: 0%;
     bottom: 0%;
     animation: orbit-spinner-orbit-three-animation
-      ${props => props.animationDuration}ms linear infinite;
-    border-top: 3px solid ${props => props.color};
+      ${(props) => props.animationDuration}ms linear infinite;
+    border-top: 3px solid ${(props) => props.color};
   }
   @keyframes orbit-spinner-orbit-one-animation {
     0% {
@@ -74,18 +74,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 50,
-  color: '#fff',
-  animationDuration: 1000,
-  className: '',
-};
-
 const OrbitSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 50,
+  color = '#fff',
+  animationDuration = 1000,
+  className = '',
   style,
   ...props
 }) => (
@@ -104,6 +97,5 @@ const OrbitSpinner = ({
 );
 
 OrbitSpinner.propTypes = propTypes;
-OrbitSpinner.defaultProps = defaultProps;
 
 export default OrbitSpinner;
diff --git a/src/components/PixelSpinner.js b/src/components/PixelSpinner.js
index 3f1a1b1..53591e7 100644
--- a/src/components/PixelSpinner.js
+++ b/src/components/PixelSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Pixels = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -15,44 +15,55 @@ const Pixels = styled.div`
   }
 
   .pixel-spinner-inner {
-    width: ${props => props.pixelSize}px;
-    height: ${props => props.pixelSize}px;
-    background-color: ${props => props.color};
-    color: ${props => props.color};
+    width: ${(props) => props.pixelSize}px;
+    height: ${(props) => props.pixelSize}px;
+    background-color: ${(props) => props.color};
+    color: ${(props) => props.color};
 
-    box-shadow:
-      ${props => props.pixelSize * 1.5}px ${props => props.pixelSize * 1.5}px 0 0,
-      ${props => props.pixelSize * -1.5}px ${props => props.pixelSize * -1.5}px 0 0,
-      ${props => props.pixelSize * 1.5}px ${props => props.pixelSize * -1.5}px 0 0,
-      ${props => props.pixelSize * -1.5}px ${props => props.pixelSize * 1.5}px 0 0,
-      0 ${props => props.pixelSize * 1.5}px 0 0,
-      ${props => props.pixelSize * 1.5}px 0 0 0,
-      ${props => props.pixelSize * -1.5}px 0 0 0,
-      0 ${props => props.pixelSize * -1.5}px 0 0;
-    animation: pixel-spinner-animation ${props => props.animationDuration}ms
+    box-shadow: ${(props) => props.pixelSize * 1.5}px
+        ${(props) => props.pixelSize * 1.5}px 0 0,
+      ${(props) => props.pixelSize * -1.5}px
+        ${(props) => props.pixelSize * -1.5}px 0 0,
+      ${(props) => props.pixelSize * 1.5}px
+        ${(props) => props.pixelSize * -1.5}px 0 0,
+      ${(props) => props.pixelSize * -1.5}px
+        ${(props) => props.pixelSize * 1.5}px 0 0,
+      0 ${(props) => props.pixelSize * 1.5}px 0 0,
+      ${(props) => props.pixelSize * 1.5}px 0 0 0,
+      ${(props) => props.pixelSize * -1.5}px 0 0 0,
+      0 ${(props) => props.pixelSize * -1.5}px 0 0;
+    animation: pixel-spinner-animation ${(props) => props.animationDuration}ms
       linear infinite;
   }
 
   @keyframes pixel-spinner-animation {
     50% {
-      box-shadow:
-        ${props => props.pixelSize * 2}px ${props => props.pixelSize * 2}px 0 0,
-        ${props => props.pixelSize * -2}px ${props => props.pixelSize * -2}px 0 0,
-        ${props => props.pixelSize * 2}px ${props => props.pixelSize * -2}px 0 0,
-        ${props => props.pixelSize * -2}px ${props => props.pixelSize * 2}px 0 0,
-        0 ${props => props.pixelSize}px 0 0, ${props => props.pixelSize}px 0 0 0,
-        ${props => props.pixelSize * -1}px 0 0 0,
-        0 ${props => props.pixelSize * -1}px 0 0;
+      box-shadow: ${(props) => props.pixelSize * 2}px
+          ${(props) => props.pixelSize * 2}px 0 0,
+        ${(props) => props.pixelSize * -2}px
+          ${(props) => props.pixelSize * -2}px 0 0,
+        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * -2}px
+          0 0,
+        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * 2}px
+          0 0,
+        0 ${(props) => props.pixelSize}px 0 0,
+        ${(props) => props.pixelSize}px 0 0 0,
+        ${(props) => props.pixelSize * -1}px 0 0 0,
+        0 ${(props) => props.pixelSize * -1}px 0 0;
     }
     75% {
-      box-shadow:
-        ${props => props.pixelSize * 2}px ${props => props.pixelSize * 2}px 0 0,
-        ${props => props.pixelSize * -2}px ${props => props.pixelSize * -2}px 0 0,
-        ${props => props.pixelSize * 2}px ${props => props.pixelSize * -2}px 0 0,
-        ${props => props.pixelSize * -2}px ${props => props.pixelSize * 2}px 0 0,
-        0 ${props => props.pixelSize}px 0 0, ${props => props.pixelSize}px 0 0 0,
-        ${props => props.pixelSize * -1}px 0 0 0,
-        0 ${props => props.pixelSize * -1}px 0 0;
+      box-shadow: ${(props) => props.pixelSize * 2}px
+          ${(props) => props.pixelSize * 2}px 0 0,
+        ${(props) => props.pixelSize * -2}px
+          ${(props) => props.pixelSize * -2}px 0 0,
+        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * -2}px
+          0 0,
+        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * 2}px
+          0 0,
+        0 ${(props) => props.pixelSize}px 0 0,
+        ${(props) => props.pixelSize}px 0 0 0,
+        ${(props) => props.pixelSize * -1}px 0 0 0,
+        0 ${(props) => props.pixelSize * -1}px 0 0;
     }
     100% {
       transform: rotate(360deg);
@@ -68,18 +79,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 70,
-  color: '#fff',
-  animationDuration: 1500,
-  className: '',
-};
-
 const PixelSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 70,
+  color = '#fff',
+  animationDuration = 1500,
+  className = '',
   style,
   ...props
 }) => {
@@ -100,7 +104,6 @@ const PixelSpinner = ({
   );
 };
 
-PixelSpinner.propTypes = PropTypes;
-PixelSpinner.defaultProps = defaultProps;
+PixelSpinner.propTypes = propTypes;
 
 export default PixelSpinner;
diff --git a/src/components/RadarSpinner.js b/src/components/RadarSpinner.js
index 7aee4d1..651da86 100644
--- a/src/components/RadarSpinner.js
+++ b/src/components/RadarSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Radar = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
 
   * {
@@ -17,23 +17,23 @@ const Radar = styled.div`
     width: 100%;
     top: 0;
     left: 0;
-    animation: radar-spinner-animation ${props => props.animationDuration}ms
+    animation: radar-spinner-animation ${(props) => props.animationDuration}ms
       infinite;
   }
   .circle:nth-child(1) {
-    padding: ${props => props.borderWidth * 2 * 0}px;
-    animation-delay: ${props => props.animationDuration * 0.15}ms;
+    padding: ${(props) => props.borderWidth * 2 * 0}px;
+    animation-delay: ${(props) => props.animationDuration * 0.15}ms;
   }
   .circle:nth-child(2) {
-    padding: ${props => props.borderWidth * 2 * 1}px;
-    animation-delay: ${props => props.animationDuration * 0.15}ms;
+    padding: ${(props) => props.borderWidth * 2 * 1}px;
+    animation-delay: ${(props) => props.animationDuration * 0.15}ms;
   }
   .circle:nth-child(3) {
-    padding: ${props => props.borderWidth * 2 * 2}px;
-    animation-delay: ${props => props.animationDuration * 0.15}ms;
+    padding: ${(props) => props.borderWidth * 2 * 2}px;
+    animation-delay: ${(props) => props.animationDuration * 0.15}ms;
   }
   .circle:nth-child(4) {
-    padding: ${props => props.borderWidth * 2 * 3}px;
+    padding: ${(props) => props.borderWidth * 2 * 3}px;
     animation-delay: 0ms;
   }
   .circle-inner,
@@ -41,11 +41,11 @@ const Radar = styled.div`
     height: 100%;
     width: 100%;
     border-radius: 50%;
-    border: ${props => props.borderWidth}px solid transparent;
+    border: ${(props) => props.borderWidth}px solid transparent;
   }
   .circle-inner {
-    border-left-color: ${props => props.color};
-    border-right-color: ${props => props.color};
+    border-left-color: ${(props) => props.color};
+    border-right-color: ${(props) => props.color};
   }
   @keyframes radar-spinner-animation {
     50% {
@@ -65,13 +65,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 110,
-  color: '#fff',
-  animationDuration: 2000,
-  className: '',
-};
-
 function generateSpinners(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="circle">
@@ -83,14 +76,14 @@ function generateSpinners(num) {
 }
 
 const RadarSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 110,
+  color = '#fff',
+  animationDuration = 2000,
+  className = '',
   style,
   ...props
 }) => {
-  const borderWidth = size * 5 / 110;
+  const borderWidth = (size * 5) / 110;
 
   return (
     <Radar
@@ -108,6 +101,5 @@ const RadarSpinner = ({
 };
 
 RadarSpinner.propTypes = propTypes;
-RadarSpinner.defaultProps = defaultProps;
 
 export default RadarSpinner;
diff --git a/src/components/ScalingSquaresSpinner.js b/src/components/ScalingSquaresSpinner.js
index 736740b..ad1b42d 100644
--- a/src/components/ScalingSquaresSpinner.js
+++ b/src/components/ScalingSquaresSpinner.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const ScalingSquares = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  animation: scaling-squares-animation ${props => props.animationDuration}ms;
+  animation: scaling-squares-animation ${(props) => props.animationDuration}ms;
   animation-iteration-count: infinite;
   transform: rotate(0deg);
 
@@ -19,13 +19,14 @@ const ScalingSquares = styled.div`
   }
 
   .square {
-    height: calc(${props => props.size}px * 0.25 / 1.3);
-    width: calc(${props => props.size}px * 0.25 / 1.3);
+    height: calc(${(props) => props.size}px * 0.25 / 1.3);
+    width: calc(${(props) => props.size}px * 0.25 / 1.3);
     margin-right: auto;
     margin-left: auto;
-    border: calc(${props => props.size}px * 0.04 / 1.3) solid ${props => props.color};
+    border: calc(${(props) => props.size}px * 0.04 / 1.3) solid
+      ${(props) => props.color};
     position: absolute;
-    animation-duration: ${props => props.animationDuration}ms;
+    animation-duration: ${(props) => props.animationDuration}ms;
     animation-iteration-count: infinite;
   }
   .square:nth-child(1) {
@@ -78,13 +79,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 65,
-  color: '#fff',
-  animationDuration: 1250,
-  className: '',
-};
-
 function generateSpinners(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="square" />
@@ -92,10 +86,10 @@ function generateSpinners(num) {
 }
 
 const ScalingSquaresSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 65,
+  color = '#fff',
+  animationDuration = 1250,
+  className = '',
   style,
   ...props
 }) => (
@@ -112,6 +106,5 @@ const ScalingSquaresSpinner = ({
 );
 
 ScalingSquaresSpinner.propTypes = propTypes;
-ScalingSquaresSpinner.defaultProps = defaultProps;
 
 export default ScalingSquaresSpinner;
diff --git a/src/components/SelfBuildingSquareSpinner.js b/src/components/SelfBuildingSquareSpinner.js
index 010820f..5b29d5e 100644
--- a/src/components/SelfBuildingSquareSpinner.js
+++ b/src/components/SelfBuildingSquareSpinner.js
@@ -3,53 +3,53 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const BuildingSquare = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
-  top: ${props => -1 * props.initialTopPosition}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
+  top: ${(props) => -1 * props.initialTopPosition}px;
 
   * {
     box-sizing: border-box;
   }
 
   .square {
-    height: ${props => props.size / 4}px;
-    width: ${props => props.size / 4}px;
-    top: ${props => -1 * props.initialTopPosition}px;
-    margin-right: calc(${props => props.size / 4}px / 3);
-    margin-top: calc(${props => props.size / 4}px / 3);
-    background: ${props => props.color};
+    height: ${(props) => props.size / 4}px;
+    width: ${(props) => props.size / 4}px;
+    top: ${(props) => -1 * props.initialTopPosition}px;
+    margin-right: calc(${(props) => props.size / 4}px / 3);
+    margin-top: calc(${(props) => props.size / 4}px / 3);
+    background: ${(props) => props.color};
     float: left;
     position: relative;
     opacity: 0;
     animation: self-building-square-spinner
-      ${props => props.animationDuration}ms infinite;
+      ${(props) => props.animationDuration}ms infinite;
   }
   .square:nth-child(1) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 6);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 6);
   }
   .square:nth-child(2) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 7);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 7);
   }
   .square:nth-child(3) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 8);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 8);
   }
   .square:nth-child(4) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 3);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 3);
   }
   .square:nth-child(5) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 4);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 4);
   }
   .square:nth-child(6) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 5);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 5);
   }
   .square:nth-child(7) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 0);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 0);
   }
   .square:nth-child(8) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 1);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 1);
   }
   .square:nth-child(9) {
-    animation-delay: calc(${props => props.animationDuration * 0.05}ms * 2);
+    animation-delay: calc(${(props) => props.animationDuration * 0.05}ms * 2);
   }
   .clear {
     clear: both;
@@ -81,13 +81,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 40,
-  color: '#fff',
-  animationDuration: 6000,
-  className: '',
-};
-
 function generateSpinners(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className={`square${index % 3 === 0 ? ' clear' : ''}`} />
@@ -95,10 +88,10 @@ function generateSpinners(num) {
 }
 
 const SelfBuildingSquareSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 40,
+  color = '#fff',
+  animationDuration = 6000,
+  className = '',
   style,
   ...props
 }) => {
@@ -122,6 +115,5 @@ const SelfBuildingSquareSpinner = ({
 };
 
 SelfBuildingSquareSpinner.propTypes = propTypes;
-SelfBuildingSquareSpinner.defaultProps = defaultProps;
 
 export default SelfBuildingSquareSpinner;
diff --git a/src/components/SemipolarSpinner.js b/src/components/SemipolarSpinner.js
index a530cd7..73606e1 100644
--- a/src/components/SemipolarSpinner.js
+++ b/src/components/SemipolarSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Semipolar = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
 
   * {
@@ -14,50 +14,70 @@ const Semipolar = styled.div`
   .ring {
     border-radius: 50%;
     position: absolute;
-    border: calc(${props => props.size}px * 0.05) solid transparent;
-    border-top-color: ${props => props.color};
-    border-left-color: ${props => props.color};
-    animation: semipolar-spinner-animation ${props => props.animationDuration}ms
-      infinite;
+    border: calc(${(props) => props.size}px * 0.05) solid transparent;
+    border-top-color: ${(props) => props.color};
+    border-left-color: ${(props) => props.color};
+    animation: semipolar-spinner-animation
+      ${(props) => props.animationDuration}ms infinite;
   }
   .ring:nth-child(1) {
-    height: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 0);
-    width: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 0);
-    top: calc(${props => props.size}px * 0.1 * 0);
-    left: calc(${props => props.size}px * 0.1 * 0);
-    animation-delay: calc(${props => props.animationDuration}ms * 0.1 * 4);
+    height: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 0
+    );
+    width: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 0
+    );
+    top: calc(${(props) => props.size}px * 0.1 * 0);
+    left: calc(${(props) => props.size}px * 0.1 * 0);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 0.1 * 4);
     z-index: 5;
   }
   .ring:nth-child(2) {
-    height: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 1);
-    width: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 1);
-    top: calc(${props => props.size}px * 0.1 * 1);
-    left: calc(${props => props.size}px * 0.1 * 1);
-    animation-delay: calc(${props => props.animationDuration}ms * 0.1 * 3);
+    height: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 1
+    );
+    width: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 1
+    );
+    top: calc(${(props) => props.size}px * 0.1 * 1);
+    left: calc(${(props) => props.size}px * 0.1 * 1);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 0.1 * 3);
     z-index: 4;
   }
   .ring:nth-child(3) {
-    height: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 2);
-    width: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 2);
-    top: calc(${props => props.size}px * 0.1 * 2);
-    left: calc(${props => props.size}px * 0.1 * 2);
-    animation-delay: calc(${props => props.animationDuration}ms * 0.1 * 2);
+    height: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 2
+    );
+    width: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 2
+    );
+    top: calc(${(props) => props.size}px * 0.1 * 2);
+    left: calc(${(props) => props.size}px * 0.1 * 2);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 0.1 * 2);
     z-index: 3;
   }
   .ring:nth-child(4) {
-    height: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 3);
-    width: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 3);
-    top: calc(${props => props.size}px * 0.1 * 3);
-    left: calc(${props => props.size}px * 0.1 * 3);
-    animation-delay: calc(${props => props.animationDuration}ms * 0.1 * 1);
+    height: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 3
+    );
+    width: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 3
+    );
+    top: calc(${(props) => props.size}px * 0.1 * 3);
+    left: calc(${(props) => props.size}px * 0.1 * 3);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 0.1 * 1);
     z-index: 2;
   }
   .ring:nth-child(5) {
-    height: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 4);
-    width: calc(${props => props.size}px - ${props => props.size}px * 0.2 * 4);
-    top: calc(${props => props.size}px * 0.1 * 4);
-    left: calc(${props => props.size}px * 0.1 * 4);
-    animation-delay: calc(${props => props.animationDuration}ms * 0.1 * 0);
+    height: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 4
+    );
+    width: calc(
+      ${(props) => props.size}px - ${(props) => props.size}px * 0.2 * 4
+    );
+    top: calc(${(props) => props.size}px * 0.1 * 4);
+    left: calc(${(props) => props.size}px * 0.1 * 4);
+    animation-delay: calc(${(props) => props.animationDuration}ms * 0.1 * 0);
     z-index: 1;
   }
   @keyframes semipolar-spinner-animation {
@@ -75,13 +95,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 65,
-  color: '#fff',
-  animationDuration: 2000,
-  className: '',
-};
-
 function generateSpinners(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="ring" />
@@ -89,10 +102,10 @@ function generateSpinners(num) {
 }
 
 const SemipolarSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 65,
+  color = '#fff',
+  animationDuration = 2000,
+  className = '',
   style,
   ...props
 }) => (
@@ -109,6 +122,5 @@ const SemipolarSpinner = ({
 );
 
 SemipolarSpinner.propTypes = propTypes;
-SemipolarSpinner.defaultProps = defaultProps;
 
 export default SemipolarSpinner;
diff --git a/src/components/SpringSpinner.js b/src/components/SpringSpinner.js
index c72c29a..1040b91 100644
--- a/src/components/SpringSpinner.js
+++ b/src/components/SpringSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Spring = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
 
   * {
     box-sizing: border-box;
@@ -12,40 +12,40 @@ const Spring = styled.div`
 
   .spring-spinner-part {
     overflow: hidden;
-    height: calc(${props => props.size}px / 2);
-    width: ${props => props.size}px;
+    height: calc(${(props) => props.size}px / 2);
+    width: ${(props) => props.size}px;
   }
   .spring-spinner-part.bottom {
     transform: rotate(180deg) scale(-1, 1);
   }
   .spring-spinner-rotator {
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
-    border: calc(${props => props.size}px / 7) solid transparent;
-    border-right-color: ${props => props.color};
-    border-top-color: ${props => props.color};
+    width: ${(props) => props.size}px;
+    height: ${(props) => props.size}px;
+    border: calc(${(props) => props.size}px / 7) solid transparent;
+    border-right-color: ${(props) => props.color};
+    border-top-color: ${(props) => props.color};
     border-radius: 50%;
     box-sizing: border-box;
-    animation: spring-spinner-animation ${props => props.animationDuration}ms
+    animation: spring-spinner-animation ${(props) => props.animationDuration}ms
       ease-in-out infinite;
     transform: rotate(-200deg);
   }
   @keyframes spring-spinner-animation {
     0% {
-      border-width: calc(${props => props.size}px / 7);
+      border-width: calc(${(props) => props.size}px / 7);
     }
     25% {
-      border-width: calc(${props => props.size}px / 23.33);
+      border-width: calc(${(props) => props.size}px / 23.33);
     }
     50% {
       transform: rotate(115deg);
-      border-width: calc(${props => props.size}px / 7);
+      border-width: calc(${(props) => props.size}px / 7);
     }
     75% {
-      border-width: calc(${props => props.size}px / 23.33);
+      border-width: calc(${(props) => props.size}px / 23.33);
     }
     100% {
-      border-width: calc(${props => props.size}px / 7);
+      border-width: calc(${(props) => props.size}px / 7);
     }
   }
 `;
@@ -58,18 +58,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 70,
-  color: '#fff',
-  animationDuration: 3000,
-  className: '',
-};
-
 const SpringSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 70,
+  color = '#fff',
+  animationDuration = 3000,
+  className = '',
   style,
   ...props
 }) => (
@@ -91,6 +84,5 @@ const SpringSpinner = ({
 );
 
 SpringSpinner.propTypes = propTypes;
-SpringSpinner.defaultProps = defaultProps;
 
 export default SpringSpinner;
diff --git a/src/components/SwappingSquaresSpinner.js b/src/components/SwappingSquaresSpinner.js
index f5f8ea1..dc9ceb4 100644
--- a/src/components/SwappingSquaresSpinner.js
+++ b/src/components/SwappingSquaresSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const SwappingSquare = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
   display: flex;
   flex-direction: row;
@@ -16,11 +16,11 @@ const SwappingSquare = styled.div`
   }
 
   .square {
-    height: calc(${props => props.size}px * 0.25 / 1.3);
-    width: calc(${props => props.size}px * 0.25 / 1.3);
-    animation-duration: ${props => props.animationDuration}ms;
-    border: calc(${props => props.size}px * 0.04 / 1.3) solid
-      ${props => props.color};
+    height: calc(${(props) => props.size}px * 0.25 / 1.3);
+    width: calc(${(props) => props.size}px * 0.25 / 1.3);
+    animation-duration: ${(props) => props.animationDuration}ms;
+    border: calc(${(props) => props.size}px * 0.04 / 1.3) solid
+      ${(props) => props.color};
     margin-right: auto;
     margin-left: auto;
     position: absolute;
@@ -28,7 +28,7 @@ const SwappingSquare = styled.div`
   }
   .square:nth-child(1) {
     animation-name: swapping-squares-animation-child-1;
-    animation-delay: ${props => props.animationDuration * 0.5}ms;
+    animation-delay: ${(props) => props.animationDuration * 0.5}ms;
   }
   .square:nth-child(2) {
     animation-name: swapping-squares-animation-child-2;
@@ -36,7 +36,7 @@ const SwappingSquare = styled.div`
   }
   .square:nth-child(3) {
     animation-name: swapping-squares-animation-child-3;
-    animation-delay: ${props => props.animationDuration * 0.5}ms;
+    animation-delay: ${(props) => props.animationDuration * 0.5}ms;
   }
   .square:nth-child(4) {
     animation-name: swapping-squares-animation-child-4;
@@ -72,13 +72,6 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 65,
-  color: '#fff',
-  animationDuration: 1000,
-  className: '',
-};
-
 function generateSpinners(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="square" />
@@ -86,10 +79,10 @@ function generateSpinners(num) {
 }
 
 const SwappingSquaresSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 65,
+  color = '#fff',
+  animationDuration = 1000,
+  className = '',
   style,
   ...props
 }) => (
@@ -106,6 +99,5 @@ const SwappingSquaresSpinner = ({
 );
 
 SwappingSquaresSpinner.propTypes = propTypes;
-SwappingSquaresSpinner.defaultProps = defaultProps;
 
 export default SwappingSquaresSpinner;
diff --git a/src/components/TrinityRingsSpinner.js b/src/components/TrinityRingsSpinner.js
index 7047eda..959d206 100644
--- a/src/components/TrinityRingsSpinner.js
+++ b/src/components/TrinityRingsSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Trinity = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   padding: 3px;
   position: relative;
   display: flex;
@@ -22,28 +22,28 @@ const Trinity = styled.div`
     position: absolute;
     display: block;
     border-radius: 50%;
-    border: 3px solid ${props => props.color};
+    border: 3px solid ${(props) => props.color};
     opacity: 1;
   }
   .circle:nth-child(1) {
-    height: ${props => props.outerWidth}px;
-    width: ${props => props.outerWidth}px;
+    height: ${(props) => props.outerWidth}px;
+    width: ${(props) => props.outerWidth}px;
     animation: trinity-rings-spinner-circle1-animation
-      ${props => props.animationDuration}ms infinite linear;
+      ${(props) => props.animationDuration}ms infinite linear;
     border-width: 3px;
   }
   .circle:nth-child(2) {
-    height: calc(${props => props.outerWidth}px * 0.65);
-    width: calc(${props => props.outerWidth}px * 0.65);
+    height: calc(${(props) => props.outerWidth}px * 0.65);
+    width: calc(${(props) => props.outerWidth}px * 0.65);
     animation: trinity-rings-spinner-circle2-animation
-      ${props => props.animationDuration}ms infinite linear;
+      ${(props) => props.animationDuration}ms infinite linear;
     border-width: 2px;
   }
   .circle:nth-child(3) {
-    height: calc(${props => props.outerWidth}px * 0.1);
-    width: calc(${props => props.outerWidth}px * 0.1);
+    height: calc(${(props) => props.outerWidth}px * 0.1);
+    width: calc(${(props) => props.outerWidth}px * 0.1);
     animation: trinity-rings-spinner-circle3-animation
-      ${props => props.animationDuration}ms infinite linear;
+      ${(props) => props.animationDuration}ms infinite linear;
     border-width: 1px;
   }
   @keyframes trinity-rings-spinner-circle1-animation {
@@ -80,18 +80,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 66,
-  color: '#fff',
-  animationDuration: 1500,
-  className: '',
-};
-
 const TrinityRingsSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 66,
+  color = '#fff',
+  animationDuration = 1500,
+  className = '',
   style,
   ...props
 }) => {
@@ -116,6 +109,5 @@ const TrinityRingsSpinner = ({
 };
 
 TrinityRingsSpinner.propTypes = propTypes;
-TrinityRingsSpinner.defaultProps = defaultProps;
 
 export default TrinityRingsSpinner;