inferno-render-delay

1.0.3 • Public • Published

Inferno Render Delay

npm version

Delay the (re)rendering of stateless components by a set amount of time.

In Javascript, sometimes we use setTimeout to make sure that the renderer gets ran before any major thread-blocking computations. This small higher-order component allows us to do this with Inferno components without adding additional state to otherwise simple components.

Installation

npm install inferno-render-delay

Documentation

function withRenderDelay(wrappedComponent, options?)
  • wrappedComponent: The stateless component to be delayed.

  • options

    • delay (number): Milliseconds to wait before (re)rendering. Defaults to 1.
    • delayFirstRender (bool): True to delay the initial render. Defaults to false.

Example

import {render} from 'inferno'
import withRenderDelay from 'inferno-render-delay'

const Message = (props) => <p>{props.text}</p>
const DelayedMessage = withRenderDelay(Message, { delay: 500, delayFirstRender: true })

render(
  <div>
    <Message text="hello" />
    <DelayedMessage text="world" />
  </div>, 
  document.getElementById('root')
)

Use Cases

Simple Delay

No Delay Delay
no-delay-computation delay-computation

Deferring Expensive Computations

No Delay Delay
no-delay-computation delay-computation

Waiting For User Input

No Delay Delay
no-delay with-delay

/inferno-render-delay/

    Package Sidebar

    Install

    npm i inferno-render-delay

    Weekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    65.9 kB

    Total Files

    19

    Last publish

    Collaborators

    • watercyclee