customizable-react-badges

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

For thorough docs , click here

• 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

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

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