A HOC injects and manages observable data services in a react Component


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
56May 24, 2021Jul 16, 2018Minified + gzip package size for @barteh/react-withservice in KB



GitHub version Build Status

A High Order Component (HOC) injects and manages observable data like rxjs observables, Promises and all other type of data in a react Component.

with using this HOC we can use any data object contains simple primitive (string | Number), complex Object, a function, Promise and rxjs observables in react components. dont worry about subscribes and unsubscribes, this HOC automaticaly manages them. other hand manages services as actions by injecting directly as functions to use in component

why use react-withservice

some developers want to use event driven pattern and so Rxjs in reaact projects. all knows this is very hard. according our experiance we created this tool for using easily Observabels in reactjs component. without need to manage subscriptions.

  • dont worry about subscribe and unsubscribes
  • no need redux to manage data model.
  • observable data ready in props.
  • actions as function in props.
  • some needed hooks like onAfter, onBefor,onError can bind,
  • manage prerequirment data for render.
  • and many usefull features


npm i @barteh/react-withservice --save

Usage in ES6


import {withService} from @barteh/react-withservice

Wrap a Component as HOC

import React, { Component } from 'react';
import  { AsService, Server } from '@barteh/AsService';
import Rx from "rxjs"
class Comp extends Component {
    render() {
        const { srv1, srv2, srv3, srv4, deleteUser } = this.props;
        return (
                {srv3   <div>{srv3.name}</div>}
                {srv4   <div>{srv4.name}</div>}

                    onclick={ () => deleteUser(5) }>

const servicesObject = {
    services: {
        srv1: 9 // direct difinition
        srv2: {
            source:(a, b) => {name:`im srv2.name: ${a}-${b}`},
            params: props => [props.a,props.b], //mapped props to service parameter
            onAfterCall: props => {}, //do somthing after call
            onBeforCall: props => true, //a blockable hook

        srv3: {
            source: a => Rx.Observable.of({ name: `im an rxjs observable:${a}` }),
            params: props => [props.match.x] //maps route params to service

        srv4: {
            source: new Promise((res, rej) => res({ name: "im from promise" }))
    actions: { // injects as functions to props
        deleteUser: new AsService(ui => Server("myserversideController/deleteuser", { userid: ui })),
        act2:p=>{return 2*p}, // direct

        act3:axios.get("some resources"),

        act4:{ //with hooks
            action:axios.get("some other resources"),
                return false; //blockable hook guard
                // call after action call


export default withService(servicesObject)(Comp);

Auto subcbscribe/unsubscribe

When register a service e.i. service:(x,y)=>param*5 component automaticly subscribe to this service and will render when that parameter change. for example if x=5,y=6 component will render for this params and wont subscribe for x=5,y=1

Parameter mapping (params clause)

this clause params:props=>[props.x,props.match.params.y] is a function, gives props as a parameter and returns series of mapped params just like service's function parameters. hoc binds this props to params and component will render and subscribe with new params.


npm run build

Related packages

AsService a wrapper for everything like object promise or rxjs observables to reloadable and injectable service.

Machinize a javascript library for creating advanced finit state machine (fsm) with auto transition and observable machine.

License: MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.