react-ts-droid-badge v0.0.2

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 react-ts-droid-badge

Usage

To use the Badge component, import it and wrap it around the content you want to badge:

import Badge from "react-ts-droidbadge";

const MyComponent = () => {
  return (
    <DroidBadge badgeContent={4}>
      <YourComponent />
    </DroidBadge>
  );
};

Props

The Badge component accepts the following props:

Customization

Variants

The Badge component supports two variants:

1. 'standard': A rounded rectangle badge with content
2. 'dot': A small circular badge without content

<DroidBadge variant="dot" badgeContent={""}>
  <YourComponent />
</DroidBadge>

Colors

You can customize the text color and background color of the badge:

<DroidBadge badgeContent={4} color="#ffffff" bgcolor="#ff0000">
  <YourComponent />
</DroidBadge>

Position

You can adjust the position of the badge:

<DroidBadge badgeContent={4} position="bottom-left">
  <YourComponent />
</DroidBadge>

Maximum Value

You can set a maximum value for numeric content:

<DroidBadge badgeContent={1000} max={999}>
  <YourComponent />
</DroidBadge>

This will display as "999+" for any value over 999.

Blinking Animation

You can make the badge blink:

<DroidBadge badgeContent={4} blink={true}>
  <YourComponent />
</DroidBadge>

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.