@droid-tech/react-ts-badge v0.0.1
Badge Component
The Badge component is a versatile React component that adds a small badge to its child content. It's built with TypeScript, providing type safety and easy integration into React projects.
Features
- Two variants: dot and standard
- Customizable badge content
- Flexible positioning
- Color customization
- Invisible mode
- Maximum value display
- Blinking animation option
- TypeScript support for type safety
Installation
To use the Badge component in your React application, install it via npm:
npm install @droid-tech/react-ts-badgeUsage
To use the Badge component, import it and wrap it around the content you want to badge:
import Badge from "@droid-tech/react-ts-badge";
const MyComponent = () => {
return (
<Badge badgeContent={4}>
<YourComponent />
</Badge>
);
};Props
The Badge component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'dot' \| 'standard' | 'standard' | The variant of the badge |
badgeContent | React.ReactNode | - | The content of the badge |
color | string | '#fff' | The text color of the badge |
bgcolor | string | '#bdbdbd' | The background color of the badge |
position | 'top-right' \| 'bottom-right' \| 'bottom-left' \| 'top-left' | 'top-right' | The position of the badge |
anchorOrigin | 'top-right' \| 'bottom-right' \| 'bottom-left' \| 'top-left' | 'top-right' | The anchor point for the badge |
invisible | boolean | false | Whether the badge should be invisible |
max | number | 99 | The maximum value to display |
blink | boolean | false | Whether the badge should blink |
children | React.ReactNode | - | The content to be badged |
Customization
Variants
The Badge component supports two variants:
'standard': A rounded rectangle badge with content'dot': A small circular badge without content
<Badge variant="dot" badgeContent={''}>
<YourComponent />
</Badge>Colors
You can customize the text color and background color of the badge:
<Badge badgeContent={4} color="#ffffff" bgcolor="#ff0000">
<YourComponent />
</Badge>Position
You can adjust the position of the badge:
<Badge badgeContent={4} position="bottom-left">
<YourComponent />
</Badge>Maximum Value
You can set a maximum value for numeric content:
<Badge badgeContent={1000} max={999}>
<YourComponent />
</Badge>This will display as "999+" for any value over 999.
Blinking Animation
You can make the badge blink:
<Badge badgeContent={4} blink={true}>
<YourComponent />
</Badge>Accessibility
The Badge component is designed to be accessible, providing visual feedback for notifications or status indicators. However, ensure that you're also providing alternative ways for users to access this information for better accessibility.
Conclusion
The Badge component provides a flexible and customizable way to add badges to elements in your React application. With its various customization options and TypeScript support, it can easily be integrated into your project to provide visual indicators for notifications, status, or other information.
11 months ago