https://github.com/barteh/react-withservice
an HOC for inject data service (data | Peomise | Rxjs Observable )automaticaly in component without subscribe or unsubscribe
https://github.com/barteh/react-withservice
bar barteh observable react-dependency-injection react-hoc react-rxjs react-service react-with-service react-withservice with-service withservice
Last synced: 27 days ago
JSON representation
an HOC for inject data service (data | Peomise | Rxjs Observable )automaticaly in component without subscribe or unsubscribe
- Host: GitHub
- URL: https://github.com/barteh/react-withservice
- Owner: barteh
- License: mit
- Created: 2018-07-16T11:10:30.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:37:39.000Z (over 2 years ago)
- Last Synced: 2025-04-18T15:00:11.482Z (about 2 months ago)
- Topics: bar, barteh, observable, react-dependency-injection, react-hoc, react-rxjs, react-service, react-with-service, react-withservice, with-service, withservice
- Language: JavaScript
- Homepage:
- Size: 397 KB
- Stars: 5
- Watchers: 5
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-withservice
- - -
[](https://badge.fury.io/gh/barteh%2Freact-withservice) [](https://travis-ci.org/barteh/react-withservice)
### 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
## Install
```cmd
npm i @barteh/react-withservice --save
```
## Usage in ES6
- - -
### Import
```js
import {withService} from @barteh/react-withservice
```
### Wrap a Component as HOC
```js
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 (
{srv1}
{srv2}
{srv3 {srv3.name}}
{srv4 {srv4.name}}
deleteUser(5) }>
deleteUser
);
}
}
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"),
onBeforCall(...params){
return false; //blockable hook guard
},
onAfterCall(d){
// 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.
## Build
```js
npm run build
```
### Related packages
[AsService](https://www.npmjs.com/package/@barteh/as-service) a wrapper for everything like object promise or rxjs observables to reloadable and injectable service.
[Machinize](https://www.npmjs.com/package/@barteh/machinize) a javascript library for creating advanced finit state machine (fsm) with auto transition and observable machine.
### License: MIT