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.
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.