Skip to content

Commit 2a9d301

Browse files
authored
docs: add basic usage demo
1 parent e1f99dc commit 2a9d301

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,42 @@ The [Live demo](https://ghiscoding.github.io/multiple-select-vanilla/) website i
3232
npm install multiple-select-vanilla
3333
```
3434

35+
## Basic Usage
36+
37+
#### 1. From a native `<select>`
38+
39+
```html
40+
<select class="multiple-select full-width" data-test="select1">
41+
<option value="1">First</option>
42+
<option value="2">Second</option>
43+
<option value="3">Third</option>
44+
<option value="4">Fourth</option>
45+
</select>
46+
```
47+
48+
and then initialize ms-select
49+
50+
```ts
51+
import { multipleSelect } from 'multiple-select-vanilla';
52+
53+
const ms = multipleSelect('.multiple-select');
54+
```
55+
56+
##### 2. From data
57+
58+
```ts
59+
import { multipleSelect } from 'multiple-select-vanilla';
60+
61+
const ms = multipleSelect('.multiple-select', {
62+
data: [
63+
{ text: 'First', value: 1 },
64+
{ text: 'Second', value: 2 },
65+
{ text: 'Third', value: 3 },
66+
{ text: 'Fourth', value: 4 },
67+
]
68+
});
69+
```
70+
3571
## Changelog
3672

3773
[CHANGELOG](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/CHANGELOG.md)

0 commit comments

Comments
 (0)