inversify-constructor-injection
Helper functions to provide class constructor parameters or function parameters from inversify
Install
npm install inversify-constructor-injection
Usage in React
To create a react app that uses this package for dfependency injection run
npx create-react-app-inversify my-app
or
npx create-react-app my-app --scripts-version react-scripts-inversify --template inversify
This creates an app with the following sample components:
;
const FunctionBasedComponent = (_props: any, _context: any, clock: ClockService) => {
return <div className="exampleComponent">
<div>Function Based Component</div>
<div>Rendered at {clock.getTime()}</div>
</div>;
}
export default injectFunction(FunctionBasedComponent, [undefined, undefined, ClockService]);
Example Usage
Constructor Injection
; // setup providersresolveContainer.bindEmployeeService.toEmployeeService;resolveContainer.bindEmployeeUtil.toEmployeeUtil;
;; ; ; // other parameters provided from inversify
Function Injection
A similar approach can be used to provide values for function parameters. Unfortunately the metadata for function parameters isn't currently available so we need to provide the metadata for the function parameters ourselves.
; // setup providersresolveContainer.bindEmployeeService.toEmployeeService;resolveContainer.bindEmployeeUtil.toEmployeeUtil;
; ; injectedFunctions"stringValueThatCantBeInjected"; // call function
Setup
This package uses Reflect Metadata to inspect the constructor parameters of your class. To use this your tsconfig.json
must contain:
and the class that you are trying to construct MUST have a decorator to inform typescript that metadata should be saved:
you must also install and import reflect-metadata
somwhere in your app - preferably as the first import.
npm install reflect-metadata
;
Minimum Typescript version: 3.5