react-delay-render

a component that delays the rendering of child components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-delay-render
900.1.26 years ago8 years agoMinified + gzip package size for react-delay-render in KB

Readme

Coverage Status Build Status
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
``` js import Delay from 'react-delay-render';
const render = () => { console.log('I am rendering'); };
const ExampleTwo = () => (
<MyComponent />
);
export default Delay({delay: 500, onRender: render})(ExampleTwo)