All Projects → zxbodya → Rx React Container

zxbodya / Rx React Container

Use RxJS in React components, via HOC or Hook

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Rx React Container

Withobservables
HOC (Higher-Order Component) for connecting RxJS Observables to React Components
Stars: ✭ 41 (-60.95%)
Mutual labels:  rxjs, observable, hoc
Rxios
A RxJS wrapper for axios
Stars: ✭ 119 (+13.33%)
Mutual labels:  rxjs, observable, rx
axios-for-observable
A RxJS wrapper for axios, same api as axios absolutely
Stars: ✭ 13 (-87.62%)
Mutual labels:  rxjs, observable, rx
Rxviz
Rx Visualizer - Animated playground for Rx Observables
Stars: ✭ 1,471 (+1300.95%)
Mutual labels:  rxjs, observable, rx
Toy Rx
A tiny implementation of RxJS that actually works, for learning
Stars: ✭ 290 (+176.19%)
Mutual labels:  rxjs, rx
Flagged
Feature Flags for React made easy with hooks, HOC and Render Props
Stars: ✭ 97 (-7.62%)
Mutual labels:  hooks, hoc
Formily
Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3
Stars: ✭ 6,554 (+6141.9%)
Mutual labels:  rxjs, observable
Reactive.how
Learn reactive programming with animated cards.
Stars: ✭ 592 (+463.81%)
Mutual labels:  rxjs, rx
micro-observables
A simple Observable library that can be used for easy state management in React applications.
Stars: ✭ 78 (-25.71%)
Mutual labels:  hooks, observable
Recycle
Convert functional/reactive object description using RxJS into React component
Stars: ✭ 374 (+256.19%)
Mutual labels:  rxjs, observable
Ngx Restangular
Restangular for Angular 2 and higher versions
Stars: ✭ 787 (+649.52%)
Mutual labels:  rxjs, observable
observable-playground
Know your Observables before deploying to production
Stars: ✭ 96 (-8.57%)
Mutual labels:  rxjs, observable
rx-ipc-electron
Pass RxJS Observables through IPC in Electron
Stars: ✭ 28 (-73.33%)
Mutual labels:  rxjs, observable
state inspector
State change & method call logger. A debugging tool for instance variables and method calls.
Stars: ✭ 24 (-77.14%)
Mutual labels:  hooks, observable
Rxemitter
RxEmitter = 🐟Rxjs + 🐡eventBus.
Stars: ✭ 43 (-59.05%)
Mutual labels:  rxjs, observable
Rxretrojsoup
A simple API-like from html website (scrapper) for Android, RxJava2 ready !
Stars: ✭ 492 (+368.57%)
Mutual labels:  observable, rx
Evolui
A tiny reactive user interface library, built on top of RxJs.
Stars: ✭ 43 (-59.05%)
Mutual labels:  rxjs, observable
Rxloop
rxloop = Redux + redux-observable (Inspired by dva)
Stars: ✭ 44 (-58.1%)
Mutual labels:  rxjs, rx
reactive-hooks
Reactive Hooks Library
Stars: ✭ 29 (-72.38%)
Mutual labels:  hooks, rxjs
rx-ease
Spring animation operator for rxjs 🦚✨
Stars: ✭ 16 (-84.76%)
Mutual labels:  rxjs, observable

Rx React Container

Build Status codecov.io

Helper utilities allowing to transparently connect RxJS logic to React Component.

Works by wrapping React Component into container that:

  • provides access to props passed to it as observables (both individual, and combinations - see details below)
  • renders wrapped component with data form observable created in controller
  • provides utility to combine observables, observers and static props into one observable of props to be rendered

If you are interested in history behind this - look at gist about it.

First project where it was used: reactive-widgets

Installation

npm install rx-react-container --save

Usage

Currently there are two ways of using it:

  • with high order components
  • with hooks

High order components:

const ContainerComponent = connect(
  controller: (propsHelper) => Observable<ResultProps>
)(WrappedComponent)

Hooks:

Warning: hooks version is very new, consider it experimental

const resultProps = useRxController(
  controller: (propsHelper) => Observable<ResultProps>,
  props
);

In theory, both are equivalent, while hooks one is more compact/flexible.

In both cases controller is function creating observable of properties to be rendered.

propsHelper argument of it provides few helper methods to access props as observables:

  • getProp(name) - returning observable of distinct values of specified property
  • getProps(...names) - returning observable of distinct arrays of values for specified properties

also there are fields with current properties(in some cases this is useful, but generally - better to use helper methods above):

  • props$ - observable with current properties
  • props - getter to get current properties of wrapper component, or what was passed to hook when rendering

To help combining various things into result observable, library also provides helper function to combine data into single observable:

combineProps(observables, observers, otherProps)

Where:

  • observables object with observables with data for component
  • observers object with observers to be passed as callbacks to component
  • props object with props to pass directly to component

Example:

import React from 'react';
import { render } from 'react-dom';

import { Subject, merge } from 'rxjs';
import { connect, combineProps } from 'rx-react-container';
import { map, scan, switchMap, startWith } from 'rxjs/operators';
import {useRxController} from './useRxController';

function App({ onMinus, onPlus, totalCount, step }) {
  return (
    <div>
      <button onClick={onMinus}>-{step}</button>[<span>{totalCount}</span>]
      <button onClick={onPlus}>+{step}</button>
    </div>
  );
}

function appController(container) {
  const onMinus$ = new Subject();
  const onPlus$ = new Subject();

  const click$ = merge(
    onMinus$.pipe(map(() => -1)),
    onPlus$.pipe(map(() => +1))
  );
  const step$ = container.getProp('step');

  const totalCount$ = step$.pipe(
    switchMap(step => click$.pipe(map(v => v * step))),
    startWith(0),
    scan((acc, x) => acc + x, 0)
  );

  return combineProps(
    { totalCount: totalCount$, step: step$ },
    { onMinus: onMinus$, onPlus: onPlus$ }
  );
}

const AppContainer = connect(appController)(App);

// same thing with hooks
function HookApp(props) {
  const state = useRxController(appController, props);
  if(!state) return null;
  const { onMinus, onPlus, totalCount, step } = state;
  return (
    <div>
      <button onClick={onMinus}>-{step}</button>[<span>{totalCount}</span>]
      <button onClick={onPlus}>+{step}</button>
    </div>
  );
}

const appElement = document.getElementById('app');
render(<AppContainer step="1" />, appElement);

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].