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

Usage

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:

1. 'standard': A rounded rectangle badge with content
2. '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.