# @usb-ai/retag-search-input
> @usb-ai/retag-search-input is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
Latest version **0.0.2** (published 2020-12-08) · 0 weekly downloads
## Install
```sh
npm install @usb-ai/retag-search-input
pnpm add @usb-ai/retag-search-input
yarn add @usb-ai/retag-search-input
bun add @usb-ai/retag-search-input
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; low quality score; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-12-08 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fatkaratekid, hexagon6 |
## Links
- npm: https://www.npmjs.com/package/@usb-ai/retag-search-input
- npm.io page: https://npm.io/package/@usb-ai/retag-search-input
## Recent versions
- 0.0.2 (latest) — 2020-12-08
- 0.0.1 — 2020-12-08
## README
# @usb-ai/retag-search-input
@usb-ai/retag-search-input is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
```text
npm install --save @usb-ai/retag-search-input
```
#### Usage: Javascript (assumes es module)
```javascript
import SearchInput from '@usb-ai/retag-search-input'
let searchInput = new SearchInput({target:document.body, props: { label: 'Search' });
searchInput.label = 'Updated Value';
```
The "target" is where the component is created. Here it is added to the html body with "document.body", but it could also be document.getElementById('id-of-html-element').
You initialize properties with "props" and you can change the prop values by just assigning the props to new values - this will be updated in the UI.
#### Usage: Legacy Javascript
Below you can see how to use the component with vanilla js.
```html
...
...
```
#### Usage: Web Component (aka. Custom Element)
You can use it as a web component.
```html
```
#### Svelte Component
```html
```
#### Theme
In order to use the provided theme you should import root.css (TODO: add it to the bundle, download it here in the meantime: https://github.com/usb-ai/retag-search/tree/main/packages/%40usb-ai/retag-search-input/), which sets different css variables used in the component which you can adapt for your own.
> FIXME: href path of link is not yet available in this bundle
````html
...
Alternatively you can set the variables in inline style in your prefered html
document of your website: ```html
````
#### Pelte
This component was created by [pelte](https://www.npmjs.com/package/publish-svelte) (aka publish-svelte)
---
_Source: https://npm.io/package/@usb-ai/retag-search-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._