react-plural

index.js

import React from 'react';

export default props => {
  const messageBuilt = plural(props);
  return <span>{messageBuilt}</span>;
};

export const plural = ({ message, ...rest }) => {
  const messageBuilt = Object.keys(rest).reduce((messageTemplate, key) => {
    if (!Array.isArray(rest[key])) {
      if (typeof rest[key] === 'number') {
        return messageTemplate
          .replace(new RegExp(`{${key}}`, 'g'), rest[key])
          .replace(
            new RegExp(`{${key.replace(/Count/g, '')}Plural}`, 'g'),
            rest[key] > 1 ? 's' : ''
          );
      }
      return messageTemplate;
    }

    return messageTemplate
      .replace(new RegExp(`{${key}Count}`, 'g'), rest[key].length)
      .replace(
        new RegExp(`{${key}Plural}`, 'g'),
        rest[key].length > 1 ? 's' : ''
      );
  }, message);

  return messageBuilt;
};

<Plural friends={['1','2']} message="You have {friendsCount} friend{friendsPlural}" />
You have 2 friends

<Plural friendsCount={2} message="You have {friendsCount} friend{friendsPlural}" />