@proxydi/react

React wrapper for ProxyDi library

Installation

Install the library with its core dependency:

npm install @proxydi/react proxydi
Copy

Configuring container

In your main application file (e.g., index.tsx) wrap your components by < ProxyDiProvider /> to give them access to dependencies in ProxyDiContainer

import React from 'react';
import ReactDOM from 'react-dom';
import { ProxyDiProvider } from '@proxydi/react';
import { ProxyDiContainer } from 'proxydi';
import App from './App';
import MyService from './MyService';

const initAppDependencies = (container: ProxyDiContainer) => {
  container.register(MyService, 'My-Service');
};

ReactDOM.render(
  <ProxyDiProvider init={initAppDependencies}>
    <App />
  </ProxyDiProvider>,
  document.getElementById('root'),
);
Copy

Using Dependencies

In your React component, access your services via the useProxyDi() hook.

import React from 'react';
import { useProxyDi } from '@proxydi/react';
import MyService from './MyService';

const MyComponent = () => {
  const myService = useProxyDi<MyService>('My-Service');

  return (
    <div>
      <h1>Data from MyService:</h1>
      <p>{myService.getData()}</p>
    </div>
  );
};

export default MyComponent;
Copy

Nesting ProxyDiProvider

You can use nested <ProxyDiProvider /> instances when you need a child container.

Contributing

Contribution documentation is not ready yet but is planned. Feel free to contribute even now though! :)

License

This project is licensed under the terms of the MIT License. See the LICENSE file for details.