reactivez
v1.0.0-2
Published
Universal reactive storage for data. Inspired by VueJS.
Downloads
5
Readme
reactivez
Universal reactive storage for data. Inspired by VueJS
Getting started
You can reactive storage in any appliation: React, Node.JS, etc.
Example:
import ReactDOM from "react-dom";
import React, { Component } from "react";
import ReactiveStorage from "reactivez";
let reactiveStorage = new ReactiveStorage({
messages: []
});
class App extends Component {
constructor(props) {
super(props);
this.state = { messages: [] };
}
componentWillMount() {
this.handle = reactiveStorage.subscribe("messages", messages =>
this.setState({ messages })
);
}
componentWillUnmount() {
reactiveStorage.deleteSubscribe(this.handle); // Delete subscribe in order to prevent memory leak
}
render() {
return (
<div>
{this.state.messages.map(message => (
<p>{message}</p>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Now you can set reactiveStorage.data.messages
and state of App component will be updated.
Reference
new ReactiveStorage(data)
Create new reactive storage with specific initial state.
ReactiveStorage.subscribe(field, callback)
Subscribe on updates of ReactiveStorage.data[field]
. If it's setter is called, callback is called with new value passed to it. Returns handle of subscribe.
ReactiveStorage.deleteSubscribe(handle)
Delete subscribe with specific handle. Used to prevent memory leaks. Handle is value returned on subscribe
call.