{"id":24107705,"url":"https://github.com/barteh/react-withservice","last_synced_at":"2025-07-05T13:39:01.907Z","repository":{"id":33117956,"uuid":"141127850","full_name":"barteh/react-withservice","owner":"barteh","description":"an HOC for inject data service (data | Peomise | Rxjs Observable )automaticaly in component without subscribe or unsubscribe","archived":false,"fork":false,"pushed_at":"2023-01-04T21:37:39.000Z","size":407,"stargazers_count":5,"open_issues_count":10,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-18T15:00:11.482Z","etag":null,"topics":["bar","barteh","observable","react-dependency-injection","react-hoc","react-rxjs","react-service","react-with-service","react-withservice","with-service","withservice"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/barteh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-16T11:10:30.000Z","updated_at":"2020-02-29T11:52:22.000Z","dependencies_parsed_at":"2023-01-14T23:28:39.732Z","dependency_job_id":null,"html_url":"https://github.com/barteh/react-withservice","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barteh%2Freact-withservice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barteh%2Freact-withservice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barteh%2Freact-withservice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barteh%2Freact-withservice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barteh","download_url":"https://codeload.github.com/barteh/react-withservice/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253796458,"owners_count":21965723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bar","barteh","observable","react-dependency-injection","react-hoc","react-rxjs","react-service","react-with-service","react-withservice","with-service","withservice"],"created_at":"2025-01-10T22:52:45.749Z","updated_at":"2025-05-12T18:25:09.753Z","avatar_url":"https://github.com/barteh.png","language":"JavaScript","readme":"# react-withservice\n\n- - -\n\n[![GitHub version](https://badge.fury.io/gh/barteh%2Freact-withservice.svg)](https://badge.fury.io/gh/barteh%2Freact-withservice) [![Build Status](https://travis-ci.org/barteh/react-withservice.svg?branch=master)](https://travis-ci.org/barteh/react-withservice)\n\n### A High Order Component (HOC) injects and manages observable data like rxjs observables, Promises and all other type of data in a react Component.\n\n\n\u003e 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.\n\u003e dont worry about subscribes and unsubscribes, this HOC automaticaly manages them.\n\u003e other hand manages services as actions by injecting directly as functions to use in component\n\n\n### why use react-withservice\n\u003e 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.\n- dont worry about subscribe and unsubscribes\n- no need redux to manage data model.\n- observable data ready in props.\n- actions as function in props.\n- some needed hooks like onAfter, onBefor,onError can bind,\n- manage prerequirment data for  render.\n- and many usefull features\n\n\n\n## Install\n\n```cmd\nnpm i @barteh/react-withservice --save\n```\n\n## Usage in ES6\n\n- - -\n\n### Import\n\n```js\nimport {withService} from @barteh/react-withservice\n\n```\n\n### Wrap a Component as HOC\n\n```js\nimport React, { Component } from 'react';\nimport  { AsService, Server } from '@barteh/AsService';\nimport Rx from \"rxjs\"\nclass Comp extends Component {\n    render() {\n        const { srv1, srv2, srv3, srv4, deleteUser } = this.props;\n        return (\n            \u003cdiv\u003e\n                \u003cdiv\u003e{srv1}\u003c/div\u003e\n                \u003cdiv\u003e{srv2}\u003c/div\u003e\n                {srv3   \u003cdiv\u003e{srv3.name}\u003c/div\u003e}\n                {srv4   \u003cdiv\u003e{srv4.name}\u003c/div\u003e}\n\n\n                \u003cbutton\n                    onclick={ () =\u003e deleteUser(5) }\u003e\n                    deleteUser\n                \u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nconst servicesObject = {\n    services: {\n        srv1: 9 // direct difinition\n        ,\n        srv2: {\n            source:(a, b) =\u003e {name:`im srv2.name: ${a}-${b}`},\n            params: props =\u003e [props.a,props.b], //mapped props to service parameter\n            onAfterCall: props =\u003e {}, //do somthing after call\n            onBeforCall: props =\u003e true, //a blockable hook\n            \n\n        },\n        srv3: {\n            source: a =\u003e Rx.Observable.of({ name: `im an rxjs observable:${a}` }),\n            params: props =\u003e [props.match.x] //maps route params to service\n\n        },\n        srv4: {\n            source: new Promise((res, rej) =\u003e res({ name: \"im from promise\" }))\n        }\n    },\n    actions: { // injects as functions to props\n        deleteUser: new AsService(ui =\u003e Server(\"myserversideController/deleteuser\", { userid: ui })),\n        act2:p=\u003e{return 2*p}, // direct\n\n        act3:axios.get(\"some resources\"),\n\n        act4:{ //with hooks\n            action:axios.get(\"some other resources\"),\n            onBeforCall(...params){\n                return false; //blockable hook guard\n            },\n            onAfterCall(d){\n                // call after action call\n            }\n        \n        }\n\n    }\n}\n\n\nexport default withService(servicesObject)(Comp);\n\n```\n\n#### Auto subcbscribe/unsubscribe\n\n\u003e When register a service e.i. `service:(x,y)=\u003eparam*5` component automaticly subscribe to this service and will render when that parameter change. for example if `x=5,y=6`\ncomponent will render for this params and wont subscribe for `x=5,y=1`\n\n#### Parameter mapping (params clause)\n\n\u003e this clause `params:props=\u003e[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.\n\n## Build\n\n```js\n\nnpm run build\n\n```\n\n### Related packages\n\n[AsService](https://www.npmjs.com/package/@barteh/as-service) a wrapper for everything like object promise or rxjs observables to reloadable and injectable service.\n\n[Machinize](https://www.npmjs.com/package/@barteh/machinize) a javascript library for creating advanced finit state machine (fsm) with auto transition and observable machine.\n\n### License: MIT","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarteh%2Freact-withservice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarteh%2Freact-withservice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarteh%2Freact-withservice/lists"}