React-ioc is an implementation of InversifyJS for react applications.
It uses Context Api of React 16 to manage containers.
-
Supports Hierarchical Dependency Injection.
-
Easy Api that supports Singleton pattern and Transient pattern.
-
Support for decorator and JSX based injection.
-
Automatic cleaning of injected properties on unmounting of React components.
-
Written with typescript i.e. has typings.
npm i @servicetitan/react-ioc
Alias for @inject from InversifyJS.
Alias for @injectable from InversifyJS.
Alias for Container from InversifyJS.
A { provider, consumer } pair generated by React.createContext
A decorator used to inject the required information in the Provider in the current level of hierarchy.
A decorator that should be used in order to consume any provided values.
A React SFC equivalent to @provide
- Store
import { injectable } from '@servicetitan/react-ioc';
@injectable()
export class MySpecialStore {
public mySpecialValue: string;
constructor() {
this.mySpecialValue = 'My Special Text';
}
}
- Providing Container with
@provide
to a component
import {provide, withContainer, injectDependency} from '@servicetitan/react-ioc';
@provide({
singletons: [MySpecialStore]
})
class MySpecialComponent extends React.Component {
@injectDependency(MySpecialStore)
public mySpecialStore: MySpecialStore;
}
- Providing container with
<Provider>
<Provider singletons={[MySpecialStore]}>
<MySpecialComponent />
</Provider>
- Any child component can inject
MySpecialStore
with following syntax without using@provide
class MySpecialSubComponent extends React.Component {
@injectDependency(MySpecialStore)
public mySpecialStore: MySpecialStore;
}
- For a non react component, we can inject values with
@inject
inside the container. Like:
class MySpecialConsumerStore {
private mySpecialStore: MySpecialStore;
constructore(@inject(MySpecialStore) mySpecialStore: MySpecialStore) {
this.mySpecialStore = mySpecialStore;
}
}
- Accessing container inside React SFC.
const MySpecialSFC = () => (
<ContainerContext.Consumer>
{
container => (
<div>
{container.get(PasswordResetStore).mySpecialValue}
</div>
)
}
</ContainerContext.Consumer>
);