muhammedogz/react-duplicator

A simple React component to duplicate its children a specified number of times.

Duplicator

A simple React component to duplicate its children a specified number of times.

Purpose

The Duplicator component is designed to simplify the process of repeating a given set of React children a specified number of times. This is particularly useful when working with skeleton screens or loading placeholders, where you often need to display multiple instances of a loader or placeholder element.

Installation

You can install the package via npm:

npm install react-duplicator

Usage

import { Duplicator } from 'react-duplicator';

const DEFAULT_COUNT = 5;

const App = () => (
  <Duplicator count={DEFAULT_COUNT}>
    <div>Hello, World!</div>
  </Duplicator>
);

export default App;

Props

count (number, optional): Number of times to duplicate the children. Defaults to 1.

children (ReactNode): The content to be duplicated.

Error Handling

If the count prop is less than 1, the Duplicator component will log an error to the console and render nothing.

import { Duplicator } from 'your-package-name';

const ErrorExample = () => (
  <Duplicator count={-1}>
    <div>This won't be rendered.</div>
  </Duplicator>
);