customizable-react-badges

Customizable and Reusable React Badge component for your all kinds of Projects and WebSites.

Usage no npm install needed!

<script type="module">
  import customizableReactBadges from 'https://cdn.skypack.dev/customizable-react-badges';
</script>

README

Logo

customizable-react-badges

Customizable and Reusable React Badge component for your all kinds of Projects and WebSites.

For thorough docs , click here

NPM JavaScript Style Guide

Code Demo

  • Customizable - Easy to customize background color, color and more.
  • Notification Badge - Easy to use with any icon as a notification badge.
  • Reasonable package size - <2.8 kB gzipped.
  • Chip - Pass content as string and use it as Chip.
  • It Just Works - Sensible default styling. Uses inline styles, so no need to import a separate css file.

Install

npm i customizable-react-badges

or

yarn add customizable-react-badges

Usage

If you wanted to use them as notification badges like

Notification Badges

you can use code like below

import React from 'react';
import { Badge } from 'customizable-react-badges';
import MailIcon from './MailIcon';

const App = () => {
    return (
            <Badge
                content={4}
                verticalAlignment="top"
                horizontalAlignment="right"
            >
                <MailIcon />
            </Badge>
    );
};

export default App;

OR

If you wanted to use them as regular simple badges like

Regular Badges

you can use code like below

import React from 'react';
import { Badge } from 'customizable-react-badges';

const App = () => {
    return (
        <div
            style={{
                height: '100vh',
                display: 'flex',
                justifyContent: 'space-around',
                width: '60vw',
                alignItems: 'center'
            }}
        >
            <Badge content="Danger" contentColor="#ffffff" />
            <Badge content="Success" bgColor="green" />
            <Badge content="Warning" bgColor="orange" />
            <Badge content="Info" bgColor="skyblue" />
        </div>
    );
};

export default App;

Properties

Property Type Required Default value Description
content string/number yes Content to be shown in the badge.
bgColor string no red Background Color of the badge.
contentColor string no white Color of the content of badge.
verticalAlignment 'top'/'bottom' no 'top' Vertical Alignment of the badge
horizontalAlignment 'left'/'right' no 'right' Horizontal Alignment of the badge.
max number no 99 Max count to show.
hideZero boolean no false Controls whether the badge is hidden when badgeContent is zero.
## License

MIT © satishnaikawadi2011