@jnsdls/rx-react-render - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

LICENSE

+Copyright 2018 Jonas Daniels
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package.json

 {
   "name": "@jnsdls/rx-react-render",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Turn observable props into a render function with values.",
@@ -34,18 +34,19 @@ "main": "dist/rx-react-render.cjs.js",
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react-app": "^3.1.2",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.4",
-    "jest": "^23.4.2",
-    "prettier": "^1.14.0",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "rollup": "^0.63.5",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.4",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rxjs": "^6.2.2"
+    "babel-core": "6.26.3",
+    "babel-plugin-external-helpers": "6.22.0",
+    "babel-preset-env": "1.7.0",
+    "babel-preset-react-app": "3.1.2",
+    "coveralls": "3.0.2",
+    "enzyme": "3.3.0",
+    "enzyme-adapter-react-16": "1.1.1",
+    "enzyme-to-json": "3.3.4",
+    "jest": "23.4.2",
+    "prettier": "1.14.0",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
+    "rollup": "0.63.5",
+    "rollup-plugin-babel": "3.0.7",
+    "rollup-plugin-commonjs": "9.1.4",
+    "rollup-plugin-node-resolve": "3.3.0",
+    "rxjs": "6.2.2"
   },
@@ -52,0 +53,0 @@ "peerDependencies": {

README.md

@@ -1,1 +0,124 @@
-TODO
+# <RxReactRender /> [![npm][npm]][npm-url] [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Build Status](https://travis-ci.com/jnsdls/rx-react-render.svg?branch=master)](https://travis-ci.com/jnsdls/rx-react-render) [![Coverage Status](https://coveralls.io/repos/github/jnsdls/rx-react-render/badge.svg?branch=master)](https://coveralls.io/github/jnsdls/rx-react-render?branch=master)
+
+A rxjs observable -> render function component for React.
+
+- [Getting Started](#getting-started)
+- [Motivation](#motivation)
+- [Examples](#examples)
+- [Props](#props)
+- [License](#license)
+
+## Getting Started
+
+You can either install the module via `npm` or `yarn`:
+
+```
+npm install @jnsdls/rx-react-render --save
+```
+
+```
+yarn add @jnsdls/rx-react-render
+```
+
+## Motivation
+
+I wanted a dead simple way to get rxjs observable values rendered. Existing solutions included all kinds of capabilities that I did not need. All I wanted is to pass an observable, and get its value as it changed over time passed through a render function.
+
+RxReactRender makes **no** assumptions about how you create your observables or what data they contain. Instead it handles subscribtion & unsubscription and gives you the current values. That's it.
+
+## Examples
+
+### Basic Usage
+
+A very simple and minimal example of how to set up RxReactRender which takes an interval() observable and renders a span with the elapsed seconds inside.
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { interval } from 'rxjs';
+import RxReactRender from '@jnsdls/rx-react-render';
+
+ReactDOM.render(
+  <RxReactRender interval={interval(1000)}>
+    {({ interval }) => <span>Elapsed Seconds: {interval}</span>}
+  </RxReactRender>,
+  document.getElementById('root')
+);
+```
+
+[![Edit RxReactRender Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rj2nw0vr5m)
+
+### Usage in combination with non-observable props
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { interval } from 'rxjs';
+import RxReactRender from '@jnsdls/rx-react-render';
+
+ReactDOM.render(
+  <RxReactRender interval={interval(1000)} title="Elapsed Seconds (as prop):">
+    {({ interval, title }) => (
+      <span>
+        {title} {interval}
+      </span>
+    )}
+  </RxReactRender>,
+  document.getElementById('root')
+);
+```
+
+[![Edit RxReactRender Combined Props Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9jrr01kqy4)
+
+### Here's a contrived **but interactive** example for how you could use this for an input
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import RxReactRender from '@jnsdls/rx-react-render';
+
+const inputState$ = new BehaviorSubject('');
+
+ReactDOM.render(
+  <RxReactRender
+    inputValue={inputState$.pipe(
+      map(str =>
+        str
+          .split('')
+          .reverse()
+          .join('')
+      )
+    )}
+    title="This input will reverse your input on every key press:"
+  >
+    {({ inputValue, title }) => (
+      <span>
+        {title} <input value={inputValue} onChange={e => inputState$.next(e.target.value)} />
+      </span>
+    )}
+  </RxReactRender>,
+  document.getElementById('root')
+);
+```
+
+[![Edit RxReactRender Combined Props Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pyx29lyrq)
+
+## Props
+
+| Name            |     Type     | Default | Description                                                                                         |
+| :-------------- | :----------: | :-----: | :-------------------------------------------------------------------------------------------------- |
+| **children**    |  `function`  | `null`  | A render function that will receive an object of values that map to the observables you passed      |
+| **observables** | `Observable` | `null`  | Any observable you pass will be subscribed to and the valye passed into the render function         |
+| **other props** |    `any`     | `null`  | Any non-observable props you pass will not be touched and simply forwarded into the render function |
+
+## License
+
+MIT
+
+[npm]: https://img.shields.io/npm/v/@jnsdls/rx-react-render.svg
+[npm-url]: https://npmjs.com/package/@jnsdls/rx-react-render

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51386

12.15%

Number of package files

6

20%

Number of lines in readme file

125

6150%

Worsened metrics

Dev dependency count

17

6.25%

No dependency changes