Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @mzvonar/defer-render-hoc with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var deferRenderHoc = require("@mzvonar/defer-render-hoc")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@mzvonar/defer-render-hoc v0.4.0

React defer render HOC

defer-render-hoc

Forked from https://github.com/hanford/defer-render-hoc.

Added WaitingComponent argument, so you can display some kind of loader while waiting for render. Added option to disable functionality for SSR.

Defer expensive react rendering with rAF


Install

$ npm install @mzvonar/defer-render-hoc --save

Usage

import React, { Component } from 'react'
import deferRender from '@mzvonar/defer-render-hoc'

class RandomComp extends Component {
  ...

  render () {
    const { scroll } = this.props

    ...
  }
}

export default deferRender(RandomComp)

SSR

You can use third parameter isEnabled to disable this component. Either pass boolean value or a function that returns boolean.

export default deferRender(RandomComp, null, canUseDom())

Demo

See this CodeSandbox for a demo.

MIT © Jack Hanford

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free