react-spinners-css - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

package.json

 {
   "name": "react-spinners-css",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": false,
@@ -75,3 +75,3 @@ "main": "dist/index.js",
     "env": {
-      "compiler": "bit.envs/compilers/react@1.0.16"
+      "compiler": "bit.envs/compilers/react@1.0.18"
     },
@@ -78,0 +78,0 @@ "componentsDefaultDirectory": "components/{name}",

README.md

 # React Spinners CSS Loaders ([Vue](https://github.com/JoshK2/vue-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
+
 [![CircleCI](https://circleci.com/gh/JoshK2/react-spinners-css.svg?style=svg)](https://circleci.com/gh/JoshK2/react-spinners-css)
@@ -19,6 +20,7 @@ [![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponents&url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Freact-spinners-css)](https://bit.dev/joshk/react-spinners-css)
 - 💅No extra CSS imports
-- ✂️Zero dependencies  
+- ✂️Zero dependencies
 - 📦Spinners can be installing separately
 
 ## [Live Demo](https://bit.dev/joshk/react-spinners-css)
+
 Browse components and explore their props with [Bit](https://bit.dev/joshk/react-spinners-css).  
@@ -29,4 +31,4 @@ Install specific react spinner component with npm, yarn or bit without having to install the whole project.
 
-  
 ## 🚀 List of Spinners - PropTypes and Default Props
+
 Each component accepts a `color` prop, and few accepts also `size` prop.  
@@ -36,27 +38,29 @@ The default `color` prop is `#7f58af`.
 
-| Spinner          | color: string | size: number  | className: string | style: object |
-| ---------------- | ------------  | ------------- | ----------------- | ------------- |
-| `<Circle/>`      | `#7f58af`     | `64`          | `""`              | `{}`          |
-| `<Default/>`     | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Ellipsis/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<DualRing/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Facebook/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Grid/>`        | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Heart/>`       | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Hourglass/>`   | `#7f58af`     | `32`          | `""`              | `{}`          |
-| `<Ring/>`        | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Ripple/>`      | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Roller/>`      | `#7f58af`     | -             | `""`              | `{}`          |
-| `<Spinner/>`     | `#7f58af`     | -             | `""`              | `{}`          |
-| `<Orbitals/>`    | `#7f58af`     | -             | `""`              | `{}`          |
-| `<Ouroboro/>`    | `#7f58af`     | -             | `""`              | `{}`          |
+| Spinner        | color: string | size: number | className: string | style: object |
+| -------------- | ------------- | ------------ | ----------------- | ------------- |
+| `<Circle/>`    | `#7f58af`     | `64`         | `""`              | `{}`          |
+| `<Default/>`   | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Ellipsis/>`  | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<DualRing/>`  | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Facebook/>`  | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Grid/>`      | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Heart/>`     | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Hourglass/>` | `#7f58af`     | `32`         | `""`              | `{}`          |
+| `<Ring/>`      | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Ripple/>`    | `#7f58af`     | `80`         | `""`              | `{}`          |
+| `<Roller/>`    | `#7f58af`     | -            | `""`              | `{}`          |
+| `<Spinner/>`   | `#7f58af`     | -            | `""`              | `{}`          |
+| `<Orbitals/>`  | `#7f58af`     | -            | `""`              | `{}`          |
+| `<Ouroboro/>`  | `#7f58af`     | -            | `""`              | `{}`          |
 
+## 📦 Installation
 
-## 📦 Installation
-### Using [npm](https://www.npmjs.com/package/react-spinners-css) to install react-spinners-css:  
+### Using [npm](https://www.npmjs.com/package/react-spinners-css) to install react-spinners-css:
+
 ```bash
 $ npm i --save react-spinners-css
-```  
+```
 
 ### Play and install react spinners with Bit
+
 Install specific react spinner component with bit, npm or yarn without having to install the whole project.  
@@ -66,14 +70,19 @@ Using [bit](https://bit.dev/joshk/react-spinners-css) to play with live demo, and try the spinners before install.
 set npm regisetry config(one time action):
+
 ```bash
 npm config set '@bit:registry' https://node.bit.dev
 ```
+
 and use your favorite package manager:
+
 ```bash
 npm i @bit/joshk.react-spinners-css.facebook
 yarn add @bit/joshk.react-spinners-css.facebook
-bit import joshk.react-spinners-css/facebook 
-```  
+bit import joshk.react-spinners-css/facebook
+```
 
 ## 💻 Usage Examples
-you can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)  
+
+you can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)
+
 ```javascript
@@ -101,7 +110,10 @@ //using npm or yarn
 ## 👾 Development
+
 You can see the components locally by cloning this repo and doing the following steps:
+
 - Install dependencies from `package.json`, run: `npm install`.
-- Run the app in the development mode, run: `npm run start`.  
+- Run the app in the development mode, run: `npm run start`.
 
 ## 🙌 Contributing
+
 - Pull requests and ⭐ stars are always welcome.
@@ -113,5 +125,55 @@ - For bugs and feature requests, please create an issue.
 ## 👏🏻 Support my open-source
+
 If you like to support my open-source contributions please star and share this project. 💫
 
+## ❔How to use with SSR?
+
+- How to use with Next.js?  
+  Install [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) and set library CSS to be transpiled.  
+  Example configuration with the library package or with a Bit component:
+
+  ```
+  // next.config.js
+  const withTM = require('next-transpile-modules')([
+    'react-spinners-css',
+    '@bit/joshk.react-spinners-css.circle',
+  ]) // pass the modules you would like to see transpiled
+
+  module.exports = withTM()
+  ```
+
+- How to use with Razzle?  
+  Create `razzle.config.js` file and add the following:
+
+  ```
+  const nodeExternals = require('webpack-node-externals')
+
+  module.exports = {
+    modify: (config, { target, dev }) => {
+      config.externals =
+        target === 'node'
+          ? [
+              nodeExternals({
+                whitelist: [
+                  dev ? 'webpack/hot/poll?300' : null,
+                  /\.(eot|woff|woff2|ttf|otf)$/,
+                  /\.(svg|png|jpg|jpeg|gif|ico)$/,
+                  /\.(mp4|mp3|ogg|swf|webp)$/,
+                  /\.(css|scss|sass|sss|less)$/,
+                  /^react-spinners-css/,
+                  /^@bit\/joshk\.react-spinners-css\.circle/,
+                ].filter(Boolean),
+              }),
+            ]
+          : []
+      return config
+    },
+  }
+
+  ```
+
+  This is a simple example [based on the Razzle repo](https://github.com/jaredpalmer/razzle/issues/689).
+
 ## 📄 License
+
 [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

Improved metrics

Total package byte prevSize

66300

increased by2.12%

Number of lines in readme file

174

increased by55.36%

No dependency changes