# woo-sync

> [![Build Status](https://travis-ci.org/stabinsh/woo-packages.svg?branch=master)](https://travis-ci.org/stabinsh/woo-packages) [![Coverage Status](https://coveralls.io/repos/github/stabinsh/woo-packages/badge.svg?branch=master)](https://coveralls.io/github

Latest version **1.0.29** (published 2018-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install woo-sync
pnpm add woo-sync
yarn add woo-sync
bun add woo-sync
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.29 |
| Published | 2018-01-25 |
| First published | 2017-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.0 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Reinis Stabins |
| Maintainers | reinisstabins |

## Links

- npm: https://www.npmjs.com/package/woo-sync
- Repository: https://github.com/stabinsh/woo-packages/tree/master/packages/woo-sync
- npm.io page: https://npm.io/package/woo-sync

## Recent versions

- 1.0.29 (latest) — 2018-01-25
- 1.0.27 — 2017-12-16
- 1.0.25 — 2017-12-14
- 1.0.24 — 2017-12-14
- 1.0.19 — 2017-11-09
- 1.0.17 — 2017-11-08
- 1.0.16 — 2017-11-07
- 1.0.15 — 2017-11-07
- 1.0.14 — 2017-11-06
- 1.0.13 — 2017-11-05
- 1.0.12 — 2017-11-04
- 1.0.11 — 2017-11-03
- 1.0.10 — 2017-11-02
- 1.0.9 — 2017-11-02
- 1.0.8 — 2017-11-02
- … 2 more at https://npm.io/package/woo-sync/versions

## README

# Woo-Sync

[![Build Status](https://travis-ci.org/stabinsh/woo-packages.svg?branch=master)](https://travis-ci.org/stabinsh/woo-packages)
[![Coverage Status](https://coveralls.io/repos/github/stabinsh/woo-packages/badge.svg?branch=master)](https://coveralls.io/github/stabinsh/woo-packages?branch=master)
[![npm version](https://badge.fury.io/js/woo-sync.svg)](https://badge.fury.io/js/woo-sync)

#### A helper for `React/Mobx` project. 
#### It provides more handy way to access values in `Mobx` store from your `<Component />`. 

## Installation
```sh
$ yarn add woo-sync
```
#### Or
```sh
$ npm install woo-sync
```

## Usage
The `woo-sync` package contains two separete packages `SyncProvider` and `syncData`



#### `SyncProvider`

Initially the `React` tree should be wrapped with `SyncProvider`.

`SyncProvider` is a wrapper component which passes store through context to all children components.

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { SyncProvider } from 'woo-sync';

import store from '../mobx-store';
import MyComponent from '../MyComponent';

const App = () => (
   <SyncProvider store={store}>
    <MyComponent />
   </SyncProvider>
);


ReactDOM.render(<App />, node);
```



#### `syncData`

To pass needed store values to `<MyComponent /> ` we need to use `syncData` HOC component to wrap `<MyComponent />`.

```js
import { syncData } from 'woo-sync';

const MyComponent = (props) => [
  <div>{props.name}</div>,
  <button onClick={props.changeName} type="button">Change name</button>
];

export default syncData({
  name: ['user', 'name'],
  changeName: ['user', 'changeName']
})(MyComponent);
```

Two ways of passing data to `syncData` is using plain object or callback function

##### Plain Object
```js
syncData({
  name: ['user', 'name'],
  changeName: ['user', 'changeName']
})(MyComponent)
```

##### Callback function
```js
syncData((props, state) => { // Arguments are current props and mobx store from context
  return {
    name: ['user', 'name'],
    changeName: ['user', 'changeName']
  };
})(MyComponent)
```

`Mobx` store looks like this :point_down:

```js
import { action, computed, observable } from 'mobx';

class User {
  @observable username = null;
  
  @action changeName() {
    this.username = 'John';
  }
  
  @computed get name() {
    return this.username;
  }
}

export default { // will be passed as a prop to SyncProvider
  user: new User()
};

```

:bear: :tiger: :octopus: :snail: :squirrel:

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