react-delay-render

React-Delay-Render

A small component that delays the rendering of components.

Usage

Download the package from npm with

npm i -S react-delay-render

import React from 'react';
import ReactDelayRender from 'react-delay-render';

const SmallRow = () => (
  <div className="row">
    ...
  </div>
);

export default ReactDelayRender({ delay: 500 })(SmallApp);

Argument Object

The Higher order component takes in two arguments, delay and a callback onRender

Delay

You can use the delay on the delayed component and the children as well.

import Delay from 'react-delay-render';

const delay = (
  <MyDelayedComponent>
    <MyOtherDelayedComponent />
  </MyDelayedComponent>
);

export default Delay({ delay: 200 })(delay);

onRender

A callback that is triggered when the rendering has started

import Delay from 'react-delay-render';

const render = () => {
  console.log('I am rendering');
};

const ExampleTwo = () => (
  <DelayedComponent>
    <MyComponent />
  </DelayedComponent>
);

export default Delay({delay: 500, onRender: render})()