# my-sample-component
> my-sample-component is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
Latest version **0.0.1** (published 2021-10-15) · 0 weekly downloads
## Install
```sh
npm install my-sample-component
pnpm add my-sample-component
yarn add my-sample-component
bun add my-sample-component
```
## 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.1 |
| Published | 2021-10-15 |
| First published | 2021-10-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | leelaing |
## Links
- npm: https://www.npmjs.com/package/my-sample-component
- npm.io page: https://npm.io/package/my-sample-component
## Recent versions
- 0.0.1 (latest) — 2021-10-15
## README
# my-sample-component
my-sample-component is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
```text
npm install --save my-sample-component
```
#### Usage: Javascript (assumes es module)
```javascript
import Component from 'my-sample-component'
let component = new Component({target:document.body, props: { name: 'Init Value' });
component.name = '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
```
#### Pelte
This component was created by [pelte](https://www.npmjs.com/package/publish-svelte) (aka publish-svelte)
---
_Source: https://npm.io/package/my-sample-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._