react-loader - npm Package Compare versions

Comparing version 2.4.5 to 2.4.6

examples/README.md

 # Examples
 
+### Demo
+
+You can check a example with hooks here:
+
+[![Edit react-loader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/optimistic-hooks-4ihxj?fontsize=14)
+
 ## Simple Example
@@ -4,0 +10,0 @@

lib/react-loader.js

@@ -12,2 +12,3 @@ (function (root, factory) {
 }(this, function (React, ReactDOM, Spinner, PropTypes, createReactClass) {
+  var hasCreateRef = !!React.createRef;
 
@@ -52,2 +53,3 @@ var Loader = createReactClass({
     getInitialState: function () {
+      this.ref = hasCreateRef ? React.createRef() : 'loader';
       return { loaded: false, options: {} };
@@ -105,4 +107,10 @@ },
         var spinner = new Spinner(this.state.options);
-        var target =  ReactDOM.findDOMNode(this.refs.loader);
+        var target;
 
+        if (hasCreateRef) {
+          target = this.ref.current;
+        } else {
+          target =  ReactDOM.findDOMNode(this.refs.loader);
+        }
+
         // clear out any other spinners from previous renders
@@ -121,3 +129,3 @@ target.innerHTML = '';
       } else {
-        props = { key: 'loader', ref: 'loader', className: this.props.parentClassName };
+        props = { key: 'loader', ref: this.ref, className: this.props.parentClassName };
       }
@@ -124,0 +132,0 @@

lib/react-loader.jsx

@@ -12,2 +12,3 @@ (function (root, factory) {
 }(this, function (React, ReactDOM, Spinner, PropTypes, createReactClass) {
+  var hasCreateRef = !!React.createRef;
 
@@ -52,2 +53,3 @@ var Loader = createReactClass({
     getInitialState: function () {
+      this.ref = hasCreateRef ? React.createRef() : 'loader';
       return { loaded: false, options: {} };
@@ -105,4 +107,10 @@ },
         var spinner = new Spinner(this.state.options);
-        var target =  ReactDOM.findDOMNode(this.refs.loader);
+        var target;
 
+        if (hasCreateRef) {
+          target = this.ref.current;
+        } else {
+          target =  ReactDOM.findDOMNode(this.refs.loader);
+        }
+
         // clear out any other spinners from previous renders
@@ -121,3 +129,3 @@ target.innerHTML = '';
       } else {
-        props = { key: 'loader', ref: 'loader', className: this.props.parentClassName };
+        props = { key: 'loader', ref: this.ref, className: this.props.parentClassName };
       }
@@ -124,0 +132,0 @@

package.json

 {
   "name": "react-loader",
   "description": "React component that displays a spinner via spin.js until your component is loaded",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "main": "lib/react-loader.js",
@@ -48,3 +48,3 @@ "scripts": {
     "chai": "^1.9.1",
-    "es5-shim": "^4.0.1",
+    "es6-shim": "0.35.3",
     "mocha": "^2.4.5",
@@ -51,0 +51,0 @@ "mocha-phantomjs": "^4.0.2",

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

46333

increased by1.07%

Lines of code

271

increased by5.45%

Worsened metrics

Number of package files

14

decreased by-6.67%

No dependency changes