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.