react-service-provider
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    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 (
         <div onClick={secondService.increaseCounter}>
           {secondService.counter}
         </div>
      );
    });
    

    index.tsx

    export const App = () => {
      const [ServiceProvider, ServiceProviderHook] = useServiceProvider(
        FirstService,
        SecondService,
      );
    
      return (
        <ServiceProvider>
          <Router basename={basePath}>
            <ServiceProviderHook>
             <AppLayout>
               <RoutedContent />
             </AppLayout>
            </ServiceProviderHook>
          </Router>
        </ServiceProvider>
      );
    };
    

    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);
      }
    );
    

    Install

    npm i react-service-provider

    DownloadsWeekly Downloads

    2

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    19

    Last publish

    Collaborators

    • makame