React Service Provider

!Alt text

``
npm i --save react-service-provider
`

This package has been created for inplementing IOC Design Pattern & Services.

Example:

SomeComponent.tsx (observer is from MobX)

`
const SomeComponent = observer((props) => {
const secondService = React.useContext(SecondService);
return (



);
});
`

index.tsx

`
export const App = () => {
const [ServiceProvider, ServiceProviderHook] = useServiceProvider(
FirstService,
SecondService,
);

return (









);
};
`

FirstService.tsx (useLocalStore is from MobX)

`
export const FirstService = createService(
() => {
const service = useLocalStore(() => ({
counter: 0,
get isCounterBigger5() {
return service.counter > 5;
},
limitCounter: () => {
if (service.isCounterBigger5) {
service.counter = 0;
}
},
}));
return service;
}
);
`

SecondService.tsx (useLocalStore is from MobX)

`
export const SecondService = createService(
() => {
const service = useLocalStore(() => ({
firstService: null as FirstService,
get counter() {
return service.firstService.counter > 5;
},
increaseCounter: () => {
service.firstService.counter++;
service.firstService.limitCounter();
},
}));
return service;
},
(service) => {
service.firstService = React.useContext(FirstService);
}
);
``