react-loader - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

bower.json

@@ -9,2 +9,3 @@ {
     "component",
+    "react-component",
     "loader",
@@ -11,0 +12,0 @@ "spinner",

lib/react-loader.js

@@ -18,2 +18,3 @@ /** @jsx React.DOM */
       loaded:    React.PropTypes.bool,
+      options:   React.PropTypes.object,
       lines:     React.PropTypes.number,
@@ -63,6 +64,10 @@ length:    React.PropTypes.number,
       allowedOptions.splice(allowedOptions.indexOf('loaded'), 1);
+      allowedOptions.splice(allowedOptions.indexOf('options'), 1);
 
+      // allows passing options as either props or as an option object
+      var propsOrObjectOptions = 'options' in props ? props.options : props;
+
       allowedOptions.forEach(function (key) {
-        if (key in props) {
-          options[key] = props[key];
+        if (key in propsOrObjectOptions) {
+          options[key] = propsOrObjectOptions[key];
         }
@@ -69,0 +74,0 @@ });

lib/react-loader.jsx

@@ -18,2 +18,3 @@ /** @jsx React.DOM */
       loaded:    React.PropTypes.bool,
+      options:   React.PropTypes.object,
       lines:     React.PropTypes.number,
@@ -63,6 +64,10 @@ length:    React.PropTypes.number,
       allowedOptions.splice(allowedOptions.indexOf('loaded'), 1);
+      allowedOptions.splice(allowedOptions.indexOf('options'), 1);
 
+      // allows passing options as either props or as an option object
+      var propsOrObjectOptions = 'options' in props ? props.options : props;
+
       allowedOptions.forEach(function (key) {
-        if (key in props) {
-          options[key] = props[key];
+        if (key in propsOrObjectOptions) {
+          options[key] = propsOrObjectOptions[key];
         }
@@ -69,0 +74,0 @@ });

package.json

 {
   "name": "react-loader",
   "description": "React component that displays a spinner via spin.js until your component is loaded",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "lib/react-loader.js",
@@ -19,2 +19,3 @@ "scripts": {
     "component",
+    "react-component",
     "loader",
@@ -21,0 +22,0 @@ "spinner",

README.md

@@ -68,9 +68,33 @@ # react-loader
 displayed, defaulting to `false`.  Additionally, all options available to
-spin.js are available to this component.
+spin.js are available to this component in two ways.
 
-    <Loader loaded={false} lines={13} length={20} width={10} radius={30}
-            corners={1} rotate={0} direction={1} color="#000" speed={1}
-            trail={60} shadow={false} hwaccel={false} className="spinner"
-            zIndex={2e9} top="50%" left="50%" />
+1. First, you can pass each option onto the loader as individual properties:
 
+        <Loader loaded={false} lines={13} length={20} width={10} radius={30}
+                corners={1} rotate={0} direction={1} color="#000" speed={1}
+                trail={60} shadow={false} hwaccel={false} className="spinner"
+                zIndex={2e9} top="50%" left="50%" />
+
+2. Alternatively, you can use supply an object using the `options` key:
+
+        var options = {
+            lines: 13,
+            length: 20,
+            width: 10,
+            radius: 30,
+            corners: 1,
+            rotate: 0,
+            direction: 1,
+            color: '#000',
+            speed: 1,
+            trail: 60,
+            shadow: false,
+            hwaccel: false,
+            zIndex: 2e9,
+            top: '50%',
+            left: '50%'
+        };
+
+        <Loader loaded={false} options={options} className="spinner" />
+
 ### Styling
@@ -77,0 +101,0 @@

test/spec/react-loader-test.js

@@ -10,3 +10,3 @@ /** @jsx React.DOM */
     description: 'loading is in progress',
-    options: { loaded: false },
+    props: { loaded: false },
     expectedOutput: /<div class="loader".*<div class="spinner"/
@@ -16,8 +16,17 @@ },
     description: 'loading is in progress with spinner options',
-    options: { loaded: false, radius: 17, width: 900 },
+    props: { loaded: false, radius: 17, width: 900 },
     expectedOutput: /<div class="loader"[^>]*?><div class="spinner"[^>]*?>.*translate\(17px, 0px\).*style="[^"]*?height: 900px;/
   },
   {
-    describe: 'loading is complete',
-    options: { loaded: true },
+    description: 'loading is in progress with spinner options and options object is used instead of props',
+    props: {
+        loaded: false,
+        width: 900,
+        options: { width: 200 }
+    },
+    expectedOutput: /<div class="loader"[^>]*?><div class="spinner"[^>]*?>.*style="[^"]*?height: 200px;/
+  },
+  {
+    description: 'loading is complete',
+    props: { loaded: true },
     expectedOutput: /<div[^>]*>Welcome<\/div>/
@@ -29,3 +38,3 @@ }];
       beforeEach(function () {
-        var loader = new Loader(testCase.options, 'Welcome');
+        var loader = new Loader(testCase.props, 'Welcome');
         React.renderComponent(loader, document.body);
@@ -32,0 +41,0 @@ });

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

14573

increased by12.22%

Lines of code

233

increased by8.37%

Number of lines in readme file

131

increased by22.43%

No dependency changes