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 })(SmallRow);

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 Delayed = () => (
  <MyDelayedComponent>
    <MyOtherDelayedComponentChild />
  </MyDelayedComponent>
);

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

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})(ExampleTwo)

Licence

Original: MIT Copyright (c) 2015 Chris Shiplet

Changes: MIT 2017 Arnthor Agustsson