add readme

Author: Liuhaoran Huang

README.md

@@ -1,9 +1,95 @@
 # React combine react
 
+![npm](https://img.shields.io/npm/v/react-combine-provider.svg)
+[![Coverage Status](https://coveralls.io/repos/github/hlhr202/React-Combine-Provider/badge.svg?branch=master)](https://coveralls.io/github/hlhr202/React-Combine-Provider?branch=master)
+[![CircleCI](https://circleci.com/gh/hlhr202/React-Combine-Provider.svg?style=shield)](https://circleci.com/gh/hlhr202/React-Combine-Provider)
+![TypeDefine](https://img.shields.io/npm/types/chalk.svg)
+
 Combine react providers in ease
+Fully support [unstated-next](https://github.com/jamiebuilds/unstated-next) and [constate](https://github.com/diegohaz/constate)
 
 ## Install
 
 ```
-npm start # or yarn start
+npm install --save react-combine-provider
+```
+
+## Usage
+
+- unstated
+
+```jsx
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createContainer } from 'unstated-next';
+import { combineProviders } from 'react-combine-reducer';
+
+const useCounter1 = (initialState = 1) => {
+    const [count, setCount] = useState(initialState);
+    const decrement = () => setCount(count - 1);
+    const increment = () => setCount(count + 1);
+    return { count, decrement, increment };
+};
+
+const Counter1 = createContainer(useCounter1);
+
+const useCounter2 = (initialState = 2) => {
+  const [count, setCount] = useState(initialState);
+  const decrement = () => setCount(count - 2);
+  const increment = () => setCount(count + 2);
+  return { count, decrement, increment };
+};
+
+const Counter2 = createContainer(useCounter2);
+
+function CounterDisplay1() {
+  const counter1 = Counter1.useContainer();
+  console.log('rendering');
+  return (
+    <div>
+      <div>counter display 1</div>
+      <div>counter 1</div>
+      <button onClick={counter1.decrement}>-</button>
+      <span>{counter1.count}</span>
+      <button onClick={counter1.increment}>+</button>
+      <br />
+    </div>
+  );
+}
+
+function CounterDisplay2() {
+  const counter1 = Counter1.useContainer();
+  const counter2 = Counter2.useContainer();
+  return (
+    <div>
+      <div>counter display 2</div>
+      <div>counter 1</div>
+      <button onClick={counter1.decrement}>-</button>
+      <span>{counter1.count}</span>
+      <button onClick={counter1.increment}>+</button>
+      <div>counter 2</div>
+      <button onClick={counter2.decrement}>-</button>
+      <span>{counter2.count}</span>
+      <button onClick={counter2.increment}>+</button>
+      <br />
+    </div>
+  );
+}
+
+const StateProviders = combineProviders([
+  [Counter1.Provider, { initialState: 5 }],
+  Counter2.Provider,
+]);
+
+function App() {
+  return (
+    <StateProviders>
+      <CounterDisplay1 />
+      <br />
+      <CounterDisplay2 />
+    </StateProviders>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
 ```