status-indicator-chip

Description

The "status-indicator-chip" is a React component designed to showcase the status or availability of a certain resource. It offers a visually appealing chip-like indicator with a blinking animation, effectively representing the current state of the resource. With the ability to display various statuses like online/offline, busy/idle, available/unavailable, or custom states, this component proves to be highly versatile.

Built for React applications, the "status-indicator-chip" seamlessly integrates with the latest versions of React and React DOM. Its adaptability allows it to be easily customized according to specific application requirements, offering developers greater flexibility.

Installation
Usage
Props
Examples
Contributing
License

Installation

npm install status-chip-indicator
yarn add status-chip-indicator

Usage

import React from "react";
import StatusChip from "status-chip-indicator";

const App = () => {
  return (
    <div>
      <StatusChip type="active" />
    </div>
  );
};

export default App;

Props

Prop Name	Type	Required	Possible Values	Default	Description
type	string	Yes	`active` `inactive` `custom`	--	Type of status chip. You can use `custom` to apply your custom styles
fontColor	string	Yes, if type is `custom`	Any color	#0eaf00	Color to be used for the status chip label (and animation if it's set to `true`)
backgroundColor	string	Yes, if type is `custom`	Any color	#ddecd1	Color to be used for the status chip background
label	string	Yes, if type is `custom`	Any string	Active	Status chip label
withBlinkAnimation	boolean	Yes, if type is `custom`	`true` `false`	false	Whether to use a blinking animation on the status chip
size	string	Yes, if type is `custom`	`sm` (small) `md` (medium) `lg` (large)	md	Size of the status chip indicator

Examples

Example 1: Active status

<StatusChip type="active" />

Example 2: Active status with custom label

<StatusChip type="active" label="Available" />

Example 3: Inactive status

<StatusChip type="inactive" />

Example 4: Inactive status with custom label

<StatusChip type="inactive" label="Not Available" />

Example 5: Custom status

<StatusChip
  type="custom"
  fontColor="#00308F"
  backgroundColor="#F0F8FF"
  label="Dispatched"
  withBlinkAnimation={false}
/>

Contributing

If you wish to contribute, read our Contributing Guide.

License

This package is available under the MIT license. See the LICENSE file for more info.

Package detail