added rollup-plugin-string and react as peerdep

Author: amareshsm

package-lock.json

@@ -54,9 +54,16 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.22.2",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^6.1.0"
   },
   "dependencies": {
     "prettier": "^2.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.2"
+  },
+  "engines": {
+    "node": ">=8"
   }
-}
+}

package.json

@@ -1,37 +1,45 @@
 import babel from '@rollup/plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
 import { terser } from 'rollup-plugin-terser'
+import { string } from 'rollup-plugin-string'
 
 const dist = 'dist'
 const bundle = 'bundle'
 const production = !process.env.ROLLUP_WATCH
 
-export default {
+const outputs = [
+  {
+    file: `${dist}/${bundle}.cjs.js`,
+    format: 'cjs',
+  },
+  {
+    file: `${dist}/${bundle}.esm.js`,
+    format: 'esm',
+  },
+  {
+    name: 'ReactSpinnerCSS',
+    file: `${dist}/${bundle}.umd.js`,
+    globals: {
+      react: 'React',
+    },
+    format: 'umd',
+  },
+]
+const common = {
   input: 'src/index.js',
   external: ['react'],
-  output: [
-    {
-      file: `${dist}/${bundle}.cjs.js`,
-      format: 'cjs',
-    },
-    {
-      file: `${dist}/${bundle}.esm.js`,
-      format: 'esm',
-    },
-    {
-      name: 'ReactSpinnerCSS',
-      file: `${dist}/${bundle}.umd.js`,
-      globals: {
-        react: 'React',
-      },
-      format: 'umd',
-    },
-  ],
   plugins: [
     resolve(),
     babel({
       exclude: 'node_modules/**',
     }),
+    string({
+      include: '**/*.css',
+    }),
     production && terser(),
   ],
 }
+export default outputs.map((output) => ({
+  ...common,
+  output,
+}))

rollup.config.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import styles from './style.css'
+const Loader1 = (props) => (
+  <>
+    <style>{styles}</style>
+    <div className="loader-div one">
+      <div className="loader1"></div>
+    </div>
+  </>
+)
+
+export default Loader1

src/Components/Loader1/Loader.js

@@ -0,0 +1 @@
+export { default as Loader1 } from './Loader'

src/Components/Loader1/index.js

@@ -0,0 +1,36 @@
+* {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+}
+
+.loader-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 380px;
+    margin: 8px;
+    border-radius: 4px;
+}
+.loader-div.one {
+    background-color: lightyellow;
+}
+
+.loader1 {
+    width: 90px;
+    height: 90px;
+    border-top: 4px solid blue;
+    border-radius: 100%;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/Components/Loader1/style.css

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from './style.css'
+
+const Loader2 = (props) => (
+  <>
+    <style>{styles}</style>
+    <div className="loader-div two">
+      <div className="loader2">
+        <div className="loader-ring">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    </div>
+  </>
+)
+
+export default Loader2

src/Components/Loader2/Loader.js

@@ -0,0 +1 @@
+export { default as Loader2 } from './Loader'

src/Components/Loader2/index.js

@@ -0,0 +1,51 @@
+* {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+}
+
+.loader-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 380px;
+    margin: 8px;
+    border-radius: 4px;
+}
+.loader-div.two {
+    background-color: lightgreen;
+}
+
+.loader2 {
+    width: 100px;
+    height: 100px;
+}
+
+.loader2 .loader-ring {
+    display: inline-block;
+    position: relative;
+    width: 95px;
+    height: 95px;
+}
+
+.loader2 .loader-ring div {
+    display: block;
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border: 6px solid black;
+    border-radius: 50%;
+    border-color: white transparent transparent transparent;
+    animation: spin 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/Components/Loader2/style.css

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './style.css'
+const Loader3 = (props) => (
+  <>
+    <styles>{styles}</styles>
+    <div className="loader3">
+      <div className="loader-ring">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </>
+)
+
+export default Loader3

src/Components/Loader3/Loader.js

@@ -0,0 +1 @@
+export { default as Loader3 } from './Loader'

src/Components/Loader3/index.js

@@ -0,0 +1,55 @@
+* {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+}
+
+.loader-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 380px;
+    margin: 8px;
+    border-radius: 4px;
+}
+
+.loader-div.three {
+    background-color: orange;
+}
+
+.loader3 {
+    width: 100px;
+    height: 100px;
+}
+
+.loader3 .loader-ring {
+    display: inline-block;
+    position: relative;
+    width: 95px;
+    height: 95px;
+}
+
+.loader3 .loader-ring div {
+    display: block;
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border: 6px solid black;
+    border-radius: 50%;
+    border-color: white transparent transparent transparent;
+    animation: spin 2s cubic-bezier(0.4, 0, 1, 1) infinite;
+}
+.loader3 .loader-ring div:nth-child(2) {
+    animation-delay: -1s;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/Components/Loader3/style.css

@@ -1,5 +1,3 @@
-import React from 'react'
-
-const Spinner = (props) => <h1>Spinners</h1>
-
-export default Spinner
+export * from './Components/Loader1'
+export * from './Components/Loader2'
+export * from './Components/Loader3'