<RxReactRender />

A rxjs observable -> render function component for React.

• Getting Started
• Motivation
• Examples
• Props
• 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.

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')
);

Usage in combination with non-observable props

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')
);

Here's a contrived but interactive example for how you could use this for an input

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')
);

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