@servicetitan/react-ioc v23.5.2
React-ioc
About
React-ioc is an implementation of InversifyJS for react applications.
It uses Context Api of React 16 to manage containers.
Features
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.
Installation
npm i @servicetitan/react-ioc --save
Documentation
@inject
Alias for @inject from InversifyJS.
@injectable
Alias for @injectable from InversifyJS.
Container
Alias for Container from InversifyJS.
@provide
A decorator used to inject the required information in the Provider in the current level of hierarchy.
useDependencies
A Hook that can be used in order to consume IoC container in stateless components.
Provider
A React SFC equivalent to @provide
Examples
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, injectDependency} from '@servicetitan/react-ioc';
@provide({
singletons: [MySpecialStore]
})
class MySpecialComponent extends React.Component {
render() {
return <MySpecialSubComponent />;
}
}
- 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;
render() {
return (
<span>
{this.mySpecialStore.mySpecialValue}
</span>
);
}
}
- For a non react component, we can inject values with
@inject
inside the container. Like:
class MySpecialConsumerStore {
private mySpecialStore: MySpecialStore;
constructor(@inject(MySpecialStore) mySpecialStore: MySpecialStore) {
this.mySpecialStore = mySpecialStore;
}
}
- Accessing container inside React FC.
// with useDependencies hook
const MySpecialSFC = (props) => {
const [ mySpecialStore ] = useDependencies(MySpecialStore);
return (
<div>
{mySpecialStore.mySpecialValue}
</div>
);
};
Using tokens.
Creating a token
// logger.tsx
import { symbolToken, injectDependency, provide, interfaces } from '@servicetitan/react-ioc';
export interface ILogger {
error(e: Error): void;
}
export const LOGGER_TOKEN = symbolToken<ILogger>('LOGGER_TOKEN');
// injectLoggerDependency decorator
export const injectLoggerDependency = injectDependency(LOGGER_TOKEN);
// provideLogger HOC
export function provideLogger(Logger: interfaces.Newable<ILogger>) {
return provide({ singletons: [{ provide: LOGGER_TOKEN, useClass: Logger }] });
}
Injecting a service by token
// error-boundary.tsx
import { injectLoggerDependency, ILogger } from './logger'
class ErrorBoundary extends React.Component {
state = { hasError: false };
@injectLoggerDependency
logger!: ILogger;
componentDidCatch(e: Error) {
this.logger.error(e);
this.setState({ hasError: true });
}
render() {
if (this.state.hasError) {
return (
<div>Something went wrong...</div>
);
}
return this.props.children;
}
}
Providing a service
// app.tsx
import { ILogger, provideLogger } from './logger';
import { ErrorBoundary } from './error-boundary';
class Logger implements ILogger {
error(e: Error) {
console.log(e);
}
}
const App = provideLogger(Logger)(() => (
<ErrorBoundary>
<Router />
</ErrorBoundary>
));
8 days ago
7 days ago
10 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
9 months ago
5 months ago
10 months ago
11 months ago
7 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago