rxjs-hooks - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

package.json

 {
   "name": "rxjs-hooks",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React hooks for RxJS",
@@ -51,3 +51,3 @@ "main": "esm/index.js",
     "typescript": "^3.1.6",
-    "webpack": "^4.25.1",
+    "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2",
@@ -54,0 +54,0 @@ "webpack-dev-server": "^3.1.10"

README.md

@@ -5,4 +5,76 @@ # React hooks for RxJS
 
-## useObservable
+- [Installation](#installation)
+- [Demo](#quick-look)
+- [Apis](#apis)
+  1. [useObservable](#useobservable)
+  2. [useEventCallback](#useeventcallback)
+  
+## 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 him</button>
+    </div>
+  );
+}
+```
+
+## Apis
+
+### `useObservable`
+
 ```tsx
@@ -16,5 +88,4 @@ declare function useObservable<T>(sourceFactory: () => Observable<T>): T | null
 
-### Examples:
+#### Examples:
 
-#### Simple:
 ```tsx
@@ -38,3 +109,4 @@ import React from 'react'
 
-#### With default value:
+**With default value:**
+
 ```tsx
@@ -58,3 +130,3 @@ import React from 'react'
 
-#### Observe props change:
+**Observe props change:**
 ```tsx
@@ -82,3 +154,3 @@ import React from 'react'
 
-## useEventCallback
+### `useEventCallback`
 
@@ -103,6 +175,4 @@ ```tsx
 
-### Examples:
+#### Examples:
 
-#### Simple:
-
 ```tsx
@@ -134,3 +204,3 @@ import React from 'react'
 
-#### With initial value:
+**With initial value:**
 
@@ -137,0 +207,0 @@ ```tsx

No alert changes

Improved metrics

Total package byte prevSize

347971

0.51%

Number of lines in readme file

226

44.87%

No dependency changes