# dob-react

> React bindings for dob.

Latest version **2.4.17** (published 2019-02-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install dob-react
pnpm add dob-react
yarn add dob-react
bun add dob-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.17 |
| Published | 2019-02-28 |
| First published | 2017-08-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 161.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 38 |
| Maintainers | ascoders |

## Links

- npm: https://www.npmjs.com/package/dob-react
- Repository: https://github.com/ascoders/dob-react
- Homepage: https://github.com/ascoders/dob-react#readme
- Issues: https://github.com/ascoders/dob-react/issues
- npm.io page: https://npm.io/package/dob-react

## Dependencies (4)

- [dob](https://npm.io/package/dob.md) ^2.5.9
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [shallow-eq](https://npm.io/package/shallow-eq.md) ^1.0.5
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.2

## Recent versions

- 2.4.17 (latest) — 2019-02-28
- 2.4.16 — 2019-02-28
- 2.4.15 — 2018-06-04
- 2.4.14 — 2018-06-01
- 2.4.13 — 2018-03-12
- 2.4.12 — 2018-03-02
- 2.4.11 — 2018-03-02
- 2.4.10 — 2018-02-14
- 2.4.9 — 2018-02-14
- 2.4.7 — 2017-12-03
- 2.4.6 — 2017-12-03
- 2.4.5 — 2017-12-03
- 2.4.4 — 2017-12-03
- 2.4.3 — 2017-11-16
- 2.4.2 — 2017-11-13
- … 18 more at https://npm.io/package/dob-react/versions

## README

# dob-react · [![CircleCI Status](https://img.shields.io/travis/dobjs/dob-react/master.svg?style=flat)](https://travis-ci.org/dobjs/dob-react) [![npm version](https://img.shields.io/npm/v/dob-react.svg?style=flat)](https://www.npmjs.com/package/dob-react) [![code coverage](https://img.shields.io/codecov/c/github/dobjs/dob-react/master.svg)](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 <any, any> {
    render() {
        return (
            <span>{this.props.store.name}</span>
        )
    }
}

ReactDOM.render(
    <Provider store={{ name: 'bob' }}>
        <App />
    </Provider>
, 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 <any, any> {}
```

### 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 <any, any> {}

ReactDOM.render(
    <Provider store={{ name: 'bob' }}> <App /> </Provider>
, document.getElementById('react-dom'))
```

### Support stateless component

```typescript
class App extends React.Component <any, any> {
    render() {
        return (
            <span>{this.props.store.name}</span>
        )
    }
}

const ConnectApp = Connect()(App)
// const ConnectApp = Connect({ ... })(App)
// const ConnectApp = Connect( state => { ... })(App)
```

---
_Source: https://npm.io/package/dob-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._