Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dobjs/dob-react
React bindings for dob
https://github.com/dobjs/dob-react
dob react react-bindings
Last synced: 6 days ago
JSON representation
React bindings for dob
- Host: GitHub
- URL: https://github.com/dobjs/dob-react
- Owner: dobjs
- License: mit
- Created: 2017-03-01T00:48:17.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-28T14:01:58.000Z (almost 6 years ago)
- Last Synced: 2024-11-11T21:33:20.214Z (about 1 month ago)
- Topics: dob, react, react-bindings
- Language: TypeScript
- Homepage:
- Size: 261 KB
- Stars: 37
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - dob-react
README
# dob-react · [](https://travis-ci.org/dobjs/dob-react) [](https://www.npmjs.com/package/dob-react) [](https://codecov.io/github/dobjs/dob-react)
React bindings for dob.
Design idea from [Mobx Implementation](https://github.com/ascoders/blog/issues/16)
## Install
```bash
npm i dob-react
```
## Online demo
Here is a basic [demo](https://jsfiddle.net/yp90Lep9/21/), and here is a [demo](https://jsfiddle.net/g19ehhgu/11/) with fractal.
## Simple Usage
```typescript
import { Provider, Connect } from 'dob-react'
@Connect
class App extends React.Component {
render() {
return (
{this.props.store.name}
)
}
}
ReactDOM.render(
, document.getElementById('react-dom'))
```
`Connect`: All parameters from outer Provider are injected into the wrapped components, and the component rerender when the variables used in the render function are modified(sync usage).
## `Connect` all functions
### Connect all
Connect all from Provider's parameters, also is this example above.
### Connect extra data
> Will also inject all parameters from outer Provider.
```typescript
@Connect({
customStore: {
name: 'lucy'
}
})
class App extends React.Component {}
```
### Map state to props
> Will also inject all parameters from outer Provider.
```typescript
@Connect(state => {
return {
customName: 'custom' + state.store.name
}
})
class App extends React.Component {}
ReactDOM.render(
, document.getElementById('react-dom'))
```
### Support stateless component
```typescript
class App extends React.Component {
render() {
return (
{this.props.store.name}
)
}
}
const ConnectApp = Connect()(App)
// const ConnectApp = Connect({ ... })(App)
// const ConnectApp = Connect( state => { ... })(App)
```