# status-indicator-chip

> React component to showcase the status or availability of a certain resource

Latest version **1.0.1** (published 2023-08-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install status-indicator-chip
pnpm add status-indicator-chip
yarn add status-indicator-chip
bun add status-indicator-chip
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-08-03 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 577.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Filipe Reynaud |
| Maintainers | reynaudfilipe |
| Keywords | react, status, status-indicator, chip, availability, animation |

## Links

- npm: https://www.npmjs.com/package/status-indicator-chip
- Repository: https://github.com/FilipeReynaud/status-indicator-chip
- Homepage: https://github.com/FilipeReynaud/status-indicator-chip#readme
- Issues: https://github.com/FilipeReynaud/status-indicator-chip/issues
- npm.io page: https://npm.io/package/status-indicator-chip

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-08-03
- 1.0.0 — 2023-08-03

## README

# status-indicator-chip

![Build](https://github.com/FilipeReynaud/status-indicator-chip/actions/workflows/main.yml/badge.svg)

## 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 (
    <div>
      <StatusChip type="active" />
    </div>
  );
};

export default App;
```

## Props

| Prop Name          | Type    | Required                 | Possible Values                               | Default | Description                                                                      |
| ------------------ | ------- | ------------------------ | --------------------------------------------- | ------- | -------------------------------------------------------------------------------- |
| type               | string  | Yes                      | `active` <br> `inactive` <br> `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` <br> `false`                             | false   | Whether to use a blinking animation on the status chip                           |
| size               | string  | Yes, if type is `custom` | `sm` (small) <br> `md` (medium) <br> `lg` (large) | md      | Size of the status chip indicator                                                |

## Examples

### Example 1: Active status

```jsx
<StatusChip type="active" />
```

### Example 2: Active status with custom label

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

### Example 3: Inactive status

```jsx
<StatusChip type="inactive" />
```

### Example 4: Inactive status with custom label

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

### Example 5: Custom status

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

## 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.

---
_Source: https://npm.io/package/status-indicator-chip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._