React binding for @kdevsoft/meta-injector

Installation

npm install @kdevsoft/meta-injector-react

Usage

Create application level hook and ReactElement for using @kdevsoft/meta-injector

// file: services.ts
import { injector } from './injector';

export const services = {
  service1: injector.createMeta<'str1'>(),
  service2: injector.createMeta<'str2'>(),
  service3: injector.createMeta<'str3'>(),
} as const;

// file: useInjector.ts
import { createMetaInjectorHook } from '@kdevsoft/meta-injector-react';
import { injector } from './injector';

export const useInjector = createMetaInjectorHook(injector);

// file: InjectorElement.ts
import { createMetaInjectorElement } from '@kdevsoft/meta-injector-react';
import { injector } from './injector';

export const InjectorElement = createMetaInjectorElement(injector);

Hook use case. Under the hood uses React.useMemo to reduce amount of render

// file: TestElement1.tsx
import { FC } from 'react';
import { services } from './services';
import { useInjector } from './useInjector';

const Element: FC = () => {
  const [service1, service2, service3] = useInjector(services.service1, services.service2, services.service3);

  return (
    <>
      <div>{service1 /* str1 */}</div>
      <div>{service2 /* str2 */}</div>
      <div>{service3 /* str3 */}</div>
    </>
  );
};

const TestElement1 = Element;
export default TestElement1;

Element use case. Under the hood uses useInjector hook with React.memo HOC with custom comparator

// file: TestElement2.tsx
import { FC } from 'react';
import { services } from './services';
import { InjectElement } from './InjectElement';

const Element: FC = () => (
  <InjectElement metaList={[services.service1, services.service2, services.service3]}>
    {(service1, service2, service3) => (
      <>
        <div>{service1 /* str1 */}</div>
        <div>{service2 /* str2 */}</div>
        <div>{service3 /* str3 */}</div>
      </>
    )}
  </InjectElement>
);

Do you like the package? Buy me a coffee :)