https://github.com/ymzuiku/vanilla-observer
Use store in every project
https://github.com/ymzuiku/vanilla-observer
Last synced: about 2 months ago
JSON representation
Use store in every project
- Host: GitHub
- URL: https://github.com/ymzuiku/vanilla-observer
- Owner: ymzuiku
- License: mit
- Created: 2019-10-20T16:07:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T14:32:56.000Z (over 3 years ago)
- Last Synced: 2024-11-21T09:20:17.726Z (5 months ago)
- Language: TypeScript
- Size: 1.13 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-observer
| type | size |
| ------ | ---- |
| min.js | 1kb |
| gzip | 300b |
## Install
unpkg, use last version:
```html
```
npm:
```sh
$ npm install --save vanilla-observer
```
## Use reactive at base HTMLElement:
```js
import vanillaObserver from 'vanilla-observer';
const obser = vanillaObserver({
name: 'dog',
age: 5,
});
// listen and connect Element
const element = document.getElementById('theElement');
// If obser's name is update, change the element
// If Element remove int document, auto unListe function
obser.subscribeFilterNode(element, s => [s.name], name => element.textContent = name);
// change obser's name
const input = document.getElementById('theInput');
input.oninput = (event)=>{
obser.nextState(s=>{
s.name = event.target.value;
})
};
```
## Use Observer at everywhere:
```js
import vanillaObserver from 'vanilla-observer';
const obser = vanillaObserver({
name: 'dog',
age: 5,
});
// Only listen s.name on change
const sub = obser.subscribeFilter(
s => [s.name],
(s) => {
console.log(s.name); // 'cat'
},
);
obser.update(s => {
s.name = 'cat';
});
// after destory
sub.unsubscribe();
```