Render components when browser is idle
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
examples
src
.babelrc.js
.editorconfig
.eslintignore
.eslintrc.yml
.flowconfig
.gitignore
.prettierrc
.watchmanconfig
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
package-lock.json
package.json
rollup.config.js

README.md

React Idle

CircleCI Maintainability MIT Licensed powered_by Modus_Create

Render components when browser is idle.

The idea is to allow Above The Fold content to render as soon as possible, letting the rest of the app render and update when the browser is idle.

This component uses requestIdleCallback. Read more about performance benefits here. requestIdleCallback is also used in Facebook.

Demo

See a working react-idle demo and compare rendering performance between syncronous rendering and rendering on idle.

Getting started

Install react-idle using npm.

npm install @modus/react-idle --save

Usage

import * as React from 'react';
import OnIdle from '@modus/react-idle';

export default class MyView extends React.Component {
  render() {
    <section>
      <article>This is above the fold content that must render ASAP</article>
      <OnIdle>
        <aside>This heavy component can be rendered when the browser is idle</aside>
      </OnIdle>
    </section>
  }
}

Dependencies

React Idle doesn't have any direct dependencies. Since it's meant to be used with React, it expects that your project aready depends on react and react-dom.

NPM will not automatically install these dependencies for you, but it will show a friendly warning message with instructions.

Configuration

Property Type Required? Description
children React Node Children you want to render on idle
placeholder React Node Placeholder component that shows before the render takes place
onRender Function Callback executed after render completes. No arguments provided.
skipSSR Boolean Use this property to prevent the children from being rendered in Server Side Rendering. Defaults to false.
syncUpdate Boolean Use this property to render updates immediately instead of triggering another onIdle process. Defaults to false.

Contributing

Testing

This project uses Jest for unit testing. To execute tests run this command:

npm test

It's useful to run tests in watch mode when developing for incremental updates.

npm run test:watch

License

This project is MIT licensed.