Join React

Extends the Array prototype to allow joining react elements similar to strings

Installation

npm install @garmingo/join-react

Usage

joinReact can be used by either importing the module or by importing the prototype extension directly.

Importing the function

import { joinReact } from '@garmingo/join-react';

const elements = [
    <div>1</div>,
    <div>2</div>,
    <div>3</div>,
];

const joinedElements = joinReact(elements, <div>Separator</div>);

Importing the Component

import { JoinReact } from '@garmingo/join-react';

const elements = [
    <div>1</div>,
    <div>2</div>,
    <div>3</div>,
];

<JoinReact elements={elements} separator={<div>Separator</div>} />

Importing the prototype extension

import '@garmingo/join-react';

const elements = [
    <div>1</div>,
    <div>2</div>,
    <div>3</div>,
];

const joinedElements = elements.joinReact(<div>Separator</div>);

Now joinedElements will be a react element containing the following:

<div>1</div>
<div>Separator</div>
<div>2</div>
<div>Separator</div>
<div>3</div>

License

MIT