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.
npm install status-chip-indicator
yarn add status-chip-indicator
import React from "react";
import StatusChip from "status-chip-indicator";
const App = () => {
return (
<div>
<StatusChip type="active" />
</div>
);
};
export default App;
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 |
<StatusChip type="active" />
<StatusChip type="active" label="Available" />
<StatusChip type="inactive" />
<StatusChip type="inactive" label="Not Available" />
<StatusChip
type="custom"
fontColor="#00308F"
backgroundColor="#F0F8FF"
label="Dispatched"
withBlinkAnimation={false}
/>
If you wish to contribute, read our Contributing Guide.
This package is available under the MIT license. See the LICENSE file for more info.