Pluralize

The Pluralize component dynamically renders words in their singular or plural form depending on the provided item count. It supports customization for singular, plural, and zero-item states, making it ideal for UIs that need to display varying amounts of items or data points.

Quick Start

To start using the Pluralize component, import it from the reablocks library and provide the count and singular props.

import { Pluralize } from 'reablocks';


export default function App() {
  return <Pluralize count={20} singular="Apple" />
}

import { Pluralize } from 'reablocks';

export default function App() {
  return <Pluralize count={20} singular="Apple" />
}

20 Apples

Examples

Basic Usage

Singular and Plural Forms

In this basic example, we show how to render a word in both its singular and plural forms based on the count. The component automatically appends an "s" to the singular form for the plural representation if the plural form is not explicitly provided:

Custom Text for Zero Values

You can specify custom text to display when the count is zero, providing a more descriptive or friendly message.

API

The Pluralize component's functionality is controlled through several properties:

Prop	Description	Default
`className`	CSS classname for the span element. `string`
`count`	Count of items. `number`	`0`
`singular` *	Singular form of the word. `string`
`plural`	Plural form of the word. Not required. `string`
`zero`	Zero state of the word. Not required. `string`
`showCount`	Show count in addition to word. `boolean`	`true`

Design and Usability Tips

Contextual Awareness: Ensure pluralized text dynamically adjusts to reflect the current state or count accurately, avoiding confusion or misinterpretation.

Pager Redact