# react-dynamic-badge

> A dynamic badge for React

Latest version **2.0.1** (published 2020-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dynamic-badge
pnpm add react-dynamic-badge
yarn add react-dynamic-badge
bun add react-dynamic-badge
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-12-31 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 37.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Reale Roberto Josef Antonio |
| Maintainers | sickdyd |
| Keywords | dynamic, badge, list, counter, badger, items, listing, array |

## Links

- npm: https://www.npmjs.com/package/react-dynamic-badge
- Repository: https://github.com/sickdyd/react-dynamic-badge
- Homepage: https://github.com/sickdyd/react-dynamic-badge#readme
- Issues: https://github.com/sickdyd/react-dynamic-badge/issues
- npm.io page: https://npm.io/package/react-dynamic-badge

## Dependencies (1)

- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 2.0.1 (latest) — 2020-12-31
- 2.0.0 — 2020-12-31
- 1.1.5 — 2020-04-02
- 1.1.4 — 2020-04-02
- 1.1.3 — 2020-01-12
- 1.1.1 — 2020-01-12
- 1.1.0 — 2019-11-19
- 1.0.9 — 2019-11-15
- 1.0.8 — 2019-11-15
- 1.0.7 — 2019-11-14
- 1.0.6 — 2019-11-14
- 1.0.5 — 2019-11-14
- 1.0.4 — 2019-11-14
- 1.0.3 — 2019-11-14
- 1.0.2 — 2019-11-14
- … 2 more at https://npm.io/package/react-dynamic-badge/versions

## README

![travis](https://travis-ci.com/sickdyd/react-dynamic-badge.svg?branch=master)

# React-Dynamic-Badge

![Screenshot](https://user-images.githubusercontent.com/45290018/103410856-a933be80-4bb0-11eb-9baa-5289b8addc38.gif)

A responsive component that shows a badge if an array of strings overflows the parent element.

```js
<DynamicBadge
    items={[
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
    ]}
/>
```

#### Technical Documentation

- [React-Dynamic-Badge](#react-dynamic-badge)
      - [Technical Documentation](#technical-documentation)
    - [Installing](#installing)
    - [Exports](#exports)
  - [`<DynamicBadge>`](#dynamicbadge)
    - [DynamicBadge Usage](#dynamicbadge-usage)
      - [`<DynamicBadge>` Props:](#dynamicbadge-props)
    - [License](#license)

### Installing

```bash
$ npm install react-dynamic-badge
```

### Exports

The default export is `<DynamicBadge>`.
Here's how to use it:

```js

import { DynamicBadge } from 'react-dynamic-badge';

```

## `<DynamicBadge>`

A `<DynamicBadge>` element will calculate the width of the parent element and show only the items that can fit. If an item overflows it will be hidden and a badge will be shown. If there is only one item and it overflows ellipsis is used. The font is inherited from the containing element.

### DynamicBadge Usage

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { DynamicBadge } from 'react-dynamic-badge';

class App extends React.Component {

  render() {
    return (
      <div style={{ width: "50%", border: "1px dashed" }}>
        <DynamicBadge
            items={[
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
            ]}
        />
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.body);
```

#### `<DynamicBadge>` Props:

| Name            | Type             | Required | Default      | Description                                                                                                           |
|-----------------|------------------|----------|--------------|-----------------------------------------------------------------------------------------------------------------------|
| badgeClass      | string           | no       | "bdg-badge"  | It's possible to use a custom class for the badge.                                                                    |
| items           | array of strings | **yes**  | []           | The items to be displayed. If not set, it falls back to an empty array (nothing is shown).                            |
| minWidth        | int              | no       |              | Sets the minimum width for the text to be shown; defaults at 1/2 characters depending on the font and character.      |
| onlyBadge       | bool             | no       | false        | If set to true it will display only the badge and no text.                                                            |
| resizeDebounce  | int              | no       | 1            | The debounce value for the resize event in ms. The smaller the value the quicker the badge will be updated on resize. |

### License

MIT

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