Package Exports

@proxydi/react
@proxydi/react/dist/index.esm.js
@proxydi/react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@proxydi/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@proxydi/react

React wrapper for ProxyDi library

Installation

Install the library with its core dependency:

npm install @proxydi/react proxydi

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'),
);

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;

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.