@paprika/counter

Description

The Counter component is a decorative element that usually displays the count of a specific object.

Installation

yarn add @paprika/counter

or with npm:

npm install @paprika/counter

Props

Counter

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |color|[ Counter.types.color.GREY, Counter.types.color.BLUE, Counter.types.color.RED]|false|Counter.types.color.GREY| Background color of the counter.| |hasIndicator|bool|false|false| If the counter should display a red dot on the top right corner. Normally used to indicate when there are new items.| |quantity|number|true|-| The number displayed inside the counter.| |size|[ Counter.types.size.SMALL, Counter.types.size.MEDIUM]|false|Counter.types.size.MEDIUM| Size of counter. It can be small or medium. Default is medium.| |threshold|number|false|99| When quantity exceeds threshold, it will display "(Threshold)+" inside the counter. Default is 99.|

Usage

For a common use case

import Counter from "@paprika/counter";

<Counter quantity="33" />;

Overwrite threshold

import Counter from "@paprika/counter";

<Counter quantity="33" threshold="5" />;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG