This is a small package with zero dependencies that enables injecting instances managed by InversifyJS straight into React components. The only thing you need to do is add a ContainerProvider at the root of your render tree and replace @injectable from InversifyJS with @injectable provided by this package, and you're good to go!

:warning: We are able to accomplish injection into React components thanks to JavaScript's new Proxy objects. If you are obsessed with browser compatibility, you probably will have to wait a while until all browsers support it. There is unfortunately no way to polyfill it.

Usage

First make sure you've installed the library:

npm install inversify-react-lite

Create a container and "provide" it to the components that you would like:

import { Container } from "inversify"
import { ContainerProvider } from "inversify-react-lite"

const myContainer = new Container()

// ...

const App = () => (
  <ContainerProvider value={container} />
    {/* your components here */}
  </ContainerProvider>
)

Next, import the @injectable-decorator from this library:

import { injectable } from "inversify-react-lite"

That's it! You're good to go! If you're unsure how to proceed, read the example. Don't forget to check out the InversifyJS documentation as well.

License

The MIT license, what else?