https://github.com/filipereynaud/status-indicator-chip
React component to showcase the status or availability of a certain resource
https://github.com/filipereynaud/status-indicator-chip
availability npm-package react status-chip typescript
Last synced: 28 days ago
JSON representation
React component to showcase the status or availability of a certain resource
- Host: GitHub
- URL: https://github.com/filipereynaud/status-indicator-chip
- Owner: FilipeReynaud
- License: mit
- Created: 2023-07-22T13:45:11.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T11:59:53.000Z (almost 3 years ago)
- Last Synced: 2025-03-17T01:50:01.538Z (about 1 year ago)
- Topics: availability, npm-package, react, status-chip, typescript
- Language: TypeScript
- Homepage:
- Size: 588 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)
## Installation
```bash
npm install status-chip-indicator
yarn add status-chip-indicator
```
## Usage
```jsx
import React from "react";
import StatusChip from "status-chip-indicator";
const App = () => {
return (
);
};
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
```jsx
```
### Example 2: Active status with custom label
```jsx
```
### Example 3: Inactive status
```jsx
```
### Example 4: Inactive status with custom label
```jsx
```
### Example 5: Custom status
```jsx
```
## Contributing
If you wish to contribute, read our [Contributing Guide](./CONTRIBUTING.md).
## License
This package is available under the MIT license. See the [LICENSE file](./LICENSE) for more info.