Have ideas to improve npm?Join in the discussion! »

    @jnsdls/rx-react-render

    1.0.1 • Public • Published

    <RxReactRender /> npm License: MIT Build Status Coverage Status

    A rxjs observable -> render function component for React.

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

    Edit RxReactRender Basic Example

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

    Edit RxReactRender Combined Props Example

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

    Edit RxReactRender Combined Props Example

    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

    Install

    npm i @jnsdls/rx-react-render

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    51.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar