Update README.md

Author: zry656565

README.md

@@ -2,7 +2,73 @@
 [![CircleCI](https://circleci.com/gh/LeetCode-OpenSource/rxjs-hooks.svg?style=svg)](https://circleci.com/gh/LeetCode-OpenSource/rxjs-hooks)
 [![Coverage Status](https://coveralls.io/repos/github/LeetCode-OpenSource/rxjs-hooks/badge.svg?branch=master)](https://coveralls.io/github/LeetCode-OpenSource/rxjs-hooks?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/LeetCode-OpenSource/rxjs-hooks.svg)](https://greenkeeper.io/)
 
-## useObservable
+## Installation
+
+Using npm:
+
+```
+$ npm i --save rxjs-hooks
+```
+
+Or yarn:
+
+```
+$ yarn add rxjs-hooks
+```
+
+## Quick look
+
+- [useObservable - live demo](https://codesandbox.io/s/00x0z72l5n)
+
+```javascript
+import React from "react";
+import ReactDOM from "react-dom";
+import { useObservable } from "rxjs-hooks";
+import { interval } from "rxjs";
+import { map } from "rxjs/operators";
+
+function App() {
+  const value = useObservable(() => interval(500).pipe(map((val) => val * 3)));
+
+  return (
+    <div className="App">
+      <h1>Incremental number: {value}</h1>
+    </div>
+  );
+}
+```
+
+- [useEventCallback - live demo](https://codesandbox.io/s/jpjr31qmw)
+
+```javascript
+import React from "react";
+import ReactDOM from "react-dom";
+import { useEventCallback } from "rxjs-hooks";
+import { map } from "rxjs/operators";
+
+function App() {
+  const [clickCallback, [description, x, y]] = useEventCallback((event$) =>
+    event$.pipe(
+      map((event) => [event.target.innerHTML, event.clientX, event.clientY]),
+    ),
+    ["nothing", 0, 0],
+  )
+
+  return (
+    <div className="App">
+      <h1>click position: {x}, {y}</h1>
+      <h1>"{description}" was clicked.</h1>
+      <button onClick={clickCallback}>click me</button>
+      <button onClick={clickCallback}>click you</button>
+      <button onClick={clickCallback}>click he</button>
+    </div>
+  );
+}
+```
+
+## Apis
+
+### `useObservable`
 
 ```tsx
 declare function useObservable<T>(sourceFactory: () => Observable<T>): T | null
@@ -12,9 +78,8 @@ declare function useObservable<T>(sourceFactory: () => Observable<T>, initialSta
 declare function useObservable<T, U>(sourceFactory: (props$: Observable<U>) => Observable<T>, initialState: T, inputs: U): T
 ```
 
-### Examples:
+#### Examples:
 
-#### Simple:
 ```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -33,7 +98,8 @@ function App() {
 ReactDOM.render(<App />, document.querySelector('#app'))
 ```
 
-#### With default value:
+**With default value:**
+
 ```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -52,7 +118,7 @@ function App() {
 ReactDOM.render(<App />, document.querySelector('#app'))
 ```
 
-#### Observe props change:
+**Observe props change:**
 ```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -75,7 +141,7 @@ ReactDOM.render(<App foo={1000} />, document.querySelector('#app'))
 ReactDOM.render(<App foo={2000} />, document.querySelector('#app'))
 ```
 
-## useEventCallback
+### `useEventCallback`
 
 ```tsx
 declare type EventCallbackState<T, U> = [
@@ -95,9 +161,7 @@ declare function useEventCallback<T, U = void>(
 ): EventCallbackState<T, U>
 ```
 
-### Examples:
-
-#### Simple:
+#### Examples:
 
 ```tsx
 import React from 'react'
@@ -125,7 +189,7 @@ function App() {
 ReactDOM.render(<App />, document.querySelector('#app'))
 ```
 
-#### With initial value:
+**With initial value:**
 
 ```tsx
 import React from 'react'