react-fast-mount - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/react-fast-mount.js

@@ -138,3 +138,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
           _this2.timerId = null;
-        }, 16);
+        }, 8);
       }
@@ -141,0 +141,0 @@ }, {

dist/react-fast-mount.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.SomeComponent=t(require("react")):e.SomeComponent=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e,t){return function(n){function i(){var e,t,n,u;r(this,i);for(var c=arguments.length,l=Array(c),a=0;a<c;a++)l[a]=arguments[a];return t=n=o(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(l))),n.state={renderComponent:!1},n.timerId=null,u=t,o(n,u)}return u(i,n),c(i,[{key:"componentDidMount",value:function(){var e=this;this.timerId=window.setTimeout(function(){e.setState({renderComponent:!0}),e.timerId=null},16)}},{key:"componentWillUnmount",value:function(){null!==this.timerId&&window.clearTimeout(this.timerId)}},{key:"render",value:function(){return void 0!==t&&a.default.isValidElement(t)?a.default.cloneElement(t,{},!0===this.state.renderComponent?a.default.createElement(e,this.props):null):!0===this.state.renderComponent?a.default.createElement(e,this.props):null}}]),i}(a.default.Component)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();t.default=i;var l=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(l);e.exports=t.default}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.SomeComponent=t(require("react")):e.SomeComponent=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e,t){return function(n){function i(){var e,t,n,u;r(this,i);for(var c=arguments.length,l=Array(c),a=0;a<c;a++)l[a]=arguments[a];return t=n=o(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(l))),n.state={renderComponent:!1},n.timerId=null,u=t,o(n,u)}return u(i,n),c(i,[{key:"componentDidMount",value:function(){var e=this;this.timerId=window.setTimeout(function(){e.setState({renderComponent:!0}),e.timerId=null},8)}},{key:"componentWillUnmount",value:function(){null!==this.timerId&&window.clearTimeout(this.timerId)}},{key:"render",value:function(){return void 0!==t&&a.default.isValidElement(t)?a.default.cloneElement(t,{},!0===this.state.renderComponent?a.default.createElement(e,this.props):null):!0===this.state.renderComponent?a.default.createElement(e,this.props):null}}]),i}(a.default.Component)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();t.default=i;var l=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(l);e.exports=t.default}])});

lib/index.js

@@ -49,3 +49,3 @@ 'use strict';
           _this2.timerId = null;
-        }, 16);
+        }, 8);
       }
@@ -52,0 +52,0 @@ }, {

package.json

 {
   "name": "react-fast-mount",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "High order component to fast mount slow renderering React components for improved app responsiveness.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # React Fast Mount
 
 [Live Example](http://react-fast-mount.rafrex.com)
+
+Fast mount slow loading components for improved responsiveness and perceived performance. This allows a site to respond instantly to user input, even if it is to show a blank screen while the component is loading, so the site is perceived as fast and responsive.
+
+The difference is most noticeable on mobile devices, especially slower devices.
+
+### Usage
+
+React Fast Mount is a high order component (HOC) - just wrap your component in the
+Fast Mount function before export, e.g. `export default fastMount(MyComponent);`.
+
+```shell
+$ yarn add react-fast-mount
+# OR
+$ npm install --save react-fast-mount
+```
+
+```js
+import React from 'react';
+import fastMount from 'react-fast-mount';
+
+class MyComponent extends React.Component {
+  ...
+  render() {
+    ...
+  }
+}
+
+// wrap your component in fastMount to fast mount it
+export default fastMount(MyComponent);
+
+//  OR
+
+// you can optionally provide a ReactElement as a second argument to use as a container
+// for MyComponent - the container will be rendered on the first render (fast),
+// and then MyComponent will be rendered inside of it on the second render
+export default fastMount(MyComponent, <div style={{ height: '200px' }} />)
+```

src/index.js

@@ -12,3 +12,3 @@ import React from 'react';
         this.timerId = null;
-      }, 16);
+      }, 8);
     }
@@ -15,0 +15,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

17702

increased by7.15%

Number of lines in readme file

41

increased by925%

No dependency changes