https://github.com/mseddon/preact-nx-observer

A simple preact decorator for @nx-js/observer-util
https://github.com/mseddon/preact-nx-observer

Last synced: about 2 months ago
JSON representation

A simple preact decorator for @nx-js/observer-util

• Host: GitHub
• URL: https://github.com/mseddon/preact-nx-observer
• Owner: mseddon
• License: mit
• Created: 2019-03-11T12:10:24.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-12T12:00:59.000Z (almost 6 years ago)
• Last Synced: 2024-09-23T10:18:43.449Z (3 months ago)
• Language: JavaScript
• Size: 51.8 KB
• Stars: 21
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# preact-nx-observer

> Simple `preact-mobx` interface for `nx-js/observer-util`.

## About

[mobx](https://github.com/mobxjs/mobx) is a great little reactive state library, but sometimes you just want to shave off a few more kb from your bundle.

Fortunately [ns-js/observer-util](https://github.com/nx-js/observer-util) is a tiny (~3k gzipped) library supporting the core of `mobx`.

This library provides a *very* tiny decorator syntax for `nx-js/observer-util`. By decorating a

Preact `Component` class as `@observer`, the component will automagically re-render whenever a dependent observable value changes.

## Usage

```javascript

import { h, Component, render } from "preact";

import { observable } from "@nx-js/observer-util";

import { observer } from "preact-nx-observer";

let thing = observable({ foo: "This is foo's data"});

@observer

class Foo extends Component {

    render() {

        return 
{thing.foo}

    }

}


render(, document.querySelector("#content"));

setInterval(() => thing.foo += "!", 1000)

```

And thats it!

## License

MIT