The React plugin makes it easier to inject dependencies from an Injex container into React components using react hooks.
The Plugin creates a Context provider and exposes the
useInjex() hook, so you can use Injex container API to inject your application modules into your application components.
You can install the React Plugin via NPM or Yarn.
You should also make sure
ReactDOM is installed on your project.
Creating the plugin and passing it to the runtime container config object
The render function from React. The default is the render function from
This configuration is pretty rare and it used where you have more than one react version in your application.
An HTML element or string selector to use with the
The Injex React plugin is slightly different from the other plugins in a way you can use it without creating a plugin instance; here is a basic usage example.
rootElementOrSelector option tells the plugin where is the root container element for rendering the application, this is not a mandatory configuration and it's relevant only if you're going to use the
renderInjexProvider method as described below.
The most straightforward and easy way to use the plugin is by rendering your application using this injectable method. It will render your root component inside an Injex provider so you can use the
useInjex() hook anywhere in your React application components.
renderInjexProvider injectable method accepts two arguments. The first is the Root component we want to render into the container provided in the
rootElementOrSelector plugin option. The second argument is optional, and it accepts the root element for rendering the component in case the
rootElementOrSelector option was not provided; this will allow using the method multiple times with different root elements.
The method will render your root component inside an
InjexProvider component to enable the use of the
Manually rendering the
Sometimes you'll want to render the
InjexProvider by yourself. Injex React plugin exposes the
InjexProvider so you can use it while rendering your application. The provider accepts only one prop, the Injex runtime container itself, and you can access it using the
useInjex() hook is the core of the Injex React plugin, making it possible to inject dependencies from your runtime container directly into your application components inside the
Lets say you have a singleton session manager with a
currentUser as a property:
You can inject it into your application components using the
useInjex() exposes two functions inside an array. The first is
inject, which works the same as the
@inject() decorator, and the second is the
injectAlias that works the same as the
useModuleFactory(moduleName, ...args) hook
Some of your application modules will not be singletons. you would like to create them on the fly when you need them.
For example, lets say you have a
Todo module and you want to create an instance of it inside your react component to
save state. (Note that in this example we use MobX)
From inside your component, you can use the
useModuleFactory() hook to create an instance of the Todo module.
If you want a quick demo to play with, check out the react example in the examples section.