react-delay-renderer

A tiny React component that renders its children after a specified delay.

Installation

pnpm add react-delay-renderer

You also need compatible React peer dependencies installed in your app:

• react >= 18
• react-dom >= 18

Usage

import { DelayRender } from 'react-delay-renderer';

export default function Example() {
  return (
    <DelayRender time={800} as="section">
      <h2>Loaded after 800ms</h2>
      <p>This content is rendered only after the delay has passed.</p>
    </DelayRender>
  );
}

Props

time

The delay in milliseconds before the content is rendered.

as

Optional element or component used as the wrapper when rendering.

If as is not provided, the component renders its children without an extra wrapper.

Other props

Any additional props are forwarded to the element or component passed through as.

Behavior

• Renders null until the delay is reached.
• After the timeout completes, renders the children.
• Uses a fragment by default, so no extra DOM node is added unless as is provided.

Export

import { DelayRender } from 'react-delay-renderer';