# @coveops/component-label

> This component can be used to append a DOM-friendly label to a component that is missing it.

Latest version **1.0.1** (published 2021-08-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @coveops/component-label
pnpm add @coveops/component-label
yarn add @coveops/component-label
bun add @coveops/component-label
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-08-26 |
| First published | 2021-08-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 54.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | coveoit, gfoumbi, rvundavalli, jwolfe-coveo, sfecteau, mthusscoveo, jfleurent, eqcoveo, jmdro, davebouffard, jfallaire, achouan, hsinghcoveo, wnijmeijer, lgcarrierbedard, elafleur_coveo, plavigueur, eaubin, lpblais-coveo, jpdery26, cricha |

## Links

- npm: https://www.npmjs.com/package/@coveops/component-label
- Repository: https://github.com/Coveo-Turbo/component-label
- Homepage: https://github.com/Coveo-Turbo/component-label#readme
- Issues: https://github.com/Coveo-Turbo/component-label/issues
- npm.io page: https://npm.io/package/@coveops/component-label

## Dependencies (3)

- [coveo-search-ui](https://npm.io/package/coveo-search-ui.md) ^2.10089.0
- [@coveops/turbo-core](https://npm.io/package/@coveops/turbo-core.md) ^1.2.1
- [@coveops/localization-manager](https://npm.io/package/@coveops/localization-manager.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2021-08-26
- 1.0.0 — 2021-08-26

## README

# ComponentLabel

This component can be used to append a DOM-friendly label to a component that is missing it.

Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.

## Getting Started

1. Install the component into your project.

```
npm i @coveops/component-label
```

2. Use the Component or extend it

Typescript:

```javascript
import { ComponentLabel, IComponentLabelOptions } from '@coveops/component-label';
```

Javascript

```javascript
const ComponentLabel = require('@coveops/component-label').ComponentLabel;
```

3. You can also expose the component alongside other components being built in your project.

```javascript
export * from '@coveops/component-label'
```

4. Or for quick testing, you can add the script from unpkg

```html
<script src="https://unpkg.com/@coveops/component-label@latest/dist/index.min.js"></script>
```

> Disclaimer: Unpkg should be used for testing but not for production.

5. Include the component in your template as follows:

Place the component in your markup:

```html
<div class="CoveoComponentLabel"></div>
```

## Options

The following options can be configured:

| Option | Required | Type | Default | Notes |
| --- | --- | --- | --- | --- |
| `content` | No | string | `label` | Content of the label. |
| `contentType` | No | string | `text` | Specifies the content type of the label. Valid values are `header` or `text`. |
| `labelType` | No | string | empty string | Specifies the logic we will apply as to the visibility of the label. Valid values are `pager` or `breadcrumb`. If no value is provided, we will simply display the label. |
| `shouldBeLocalized` | No | boolean | `false` | Specifies whether to translate the label's value. |

## Extending

Extending the component can be done as follows:

```javascript
import { ComponentLabel, IComponentLabelOptions } from "@coveops/component-label";

export interface IExtendedComponentLabelOptions extends IComponentLabelOptions {}

export class ExtendedComponentLabel extends ComponentLabel {}
```

## Contribute

1. Clone the project
2. Copy `.env.dist` to `.env` and update the COVEO_ORG_ID and COVEO_TOKEN fields in the `.env` file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default.
3. Build the code base: `npm run build`
4. Serve the sandbox for live development `npm run serve`

---
_Source: https://npm.io/package/@coveops/component-label · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._