A simple React component for handling pluralization of a word.

Plural.tsx

import React from 'react';

export const Plural = ({
  num,
  text,
  pluralText,
  pluralSuffix,
  singularSuffix
}: {
  num: number;
  text: string;
  pluralText?: string;
  pluralSuffix?: string;
  singularSuffix?: string;
}) => {
  return (
    <>
      {num === 1
        ? text + (singularSuffix || '')
        : pluralText
        ? pluralText
        : text + (pluralSuffix || 's')}
    </>
  );
};

Usage:

const WhatTheDogsSee: React.FunctionComponent<{
  numDogs: number;
  numGeese: number;
}> = ({ numDogs, numGeese }) => (
  <p>
    The {numDogs} <Plural text="dog" num={numDogs} />{' '}
    <Plural
      text="watch"
      singularSuffix="es"
      pluralSuffix=""
      num={numDogs}
    />{' '}
    the
    {numGeese} <Plural text="goose" pluralText="geese" num={numGeese} />{' '}
    fly.
  </p>
);

🦆 👀 🐕🐕