react-and

A lightweight React component for joining multiple components in a grammatically correct way. Joins components using commas, "and", "&", "or", or any other term you specify.

Written in Typscript with zero dependencies.

Installation

yarn add react-and npm install --save react-and

Usage

ReactAnd accepts any number of children and will render them with the correct grammar.

<ReactAnd> {[ 'apples', 'oranges', 'bananas', ]} </ReactAnd>

Renders as:

apples, oranges, and bananas

You can pass any valid React components as children:

<ReactAnd> <a href="/apples">apples</a> <a href="/oranges">oranges</a> </ReactAnd>

Renders as:

<a href="/apples>apples</a> and <a href="/oranges">oranges</a>

Props

conjuction

This is the string to be used to join the last child when there is more than one child. Default: "and".

<ReactAnd conjuction="and/or"> {[ 'apples', 'oranges', ]} </ReactAnd>

Renders as:

apples and/or oranges

oxfordComma

Determinses whether an Oxford comma will be used when joining the items. Default: true.

<ReactAnd oxfordComma={false}> {[ 'apples', 'oranges', 'bananas', ]} </ReactAnd>

Renders as:

apples, oranges and bananas

Demo

https://react-and.surge.sh/

License

Licensed under MIT.