react-magic-state
Version:
React state management without the hassle.
104 lines (74 loc) • 2.45 kB
Markdown
# React Magic State
[](https://www.npmjs.com/package/react-magic-state)
[](https://github.com/thinkcraft/react-magic-state/blob/master/LICENSE)
React state management without the hassle.
## Introduction
React Magic State was created with simplicity and efficiency in mind. Its tiny API, comprised of just three methods, is enough to express all possible reactive state-component relationships.
The way React Magic State works is by wrapping your store(s) with ES6 proxies, and using them to keep track of every property that is accessed by your React components. Whenever an observed property changes, the relevant components are re-rendered by updating their internal state.
The use of ES6 proxies means that only current browsers are supported. This means no Internet Explorer support, sorry.
## Installation
```
npm install --save react-magic-state
```
## API
### useStore()
Simply wrap your store(s) with `useStore()`:
```js
const store = useStore({
foo: 42
});
```
#### Private Store in class component
Inside class components, you can call `useStore()` to track local state:
```jsx
const Hello = view(class Hello extends React.PureComponent {
constructor(props) {
super(props);
this.store = useStore({
name: "World"
});
}
render() {
return <h1>Hello {this.store.name}!</h1>;
}
});
```
#### Private store in function component
Inside function components, you can call `useStore()` to track local state:
```jsx
const Hello = view(function Hello() {
const store = useStore({
name: "World"
});
return <h1>Hello {store.name}!</h1>
});
```
### view()
Wrap your components with `view()` to track store(s) and react to changes:
```jsx
const Hello = view(class Hello extends React.PureComponent {
render() {
...
}
});
```
You can also use `view()` as a decorator with Babel or TypeScript:
```jsx
@view
class Hello extends React.Component {
render() {
...
}
}
```
### batch()
Wrap your bulk actions with `batch()` to minimise re-renders and improve performance:
```jsx
class Store {
bulkAction() {
batch(() => {
...
});
}
}
```