React DI Poc

app.tsx

import React from 'react';
import { DependencyContainer, ProvidersMap } from 'some-react-di';

const providers = new ProvidersMap([SomeService, {token: AnotherService, provide: new MockService()}]);
providers.bind('string-token').to('some-value');

export const App = () => 
(
  <DependencyContainer providersMap={providers}>
    <SomeContainerComponentA />  
    <SomeContainerComponentB />  
  </DependencyContainer/>
)

some-container-component-a.tsx

import React from 'react';
import { useProvider } from 'some-react-di';

export const SomeContainerComponentA = () => {
  const service: SomeService = useProvider(SomeService);

  return <div>{service.foo}</div>
}

some-container-component-b.tsx

import React from 'react';
import { withProvider } from 'some-react-di';

const SomeContainerComponentBpure = ({service, staticValue}: {service: AnotherService, staticValue: string}) => (
  <div>{service.someMockData}, {staticValue}</div>
)

export const SomeContainerComponentB = compose(
  withProvider('service', AnotherService),
  withProvider('staticValue', 'string-token'),
)(SomeContainerComponentBpure);