Smart Dependency Inject Provider for NextJS

How to use

Installation

Go to your project, open the terminal and use the following command:

npm i reflect-metadata@^0.1.13

npm i @smartbit4all/di-provider

In your tsconfig.json you should add some new parameters:

tsconfig.json:

"compilerOptions": {
    ...
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
}

Usage

In order to make your Service injectable into Components, use the @Injectable decorator on your class. Note that your class should have a (public) constructor!

example.service.ts

import { Injectable } from "@smartbit4all/di-provider";

@Injectable
export class ExampleService {

    constructor() { ... }

    public doStg(): any { ... }
}

You should provide the services you want to use in the @Provide decorator on your class. In the constructor of your component you can use dependency injection to use the @Injectable services of yours.

It is important to use class ExampleComponent and export it in the end of the file export default ChangeCounter rather than use this: export default class ExampleComponent.

example.component.tsx

import { Provide } from "@smartbit4all/di-provider";

@Provide([ExampleService])
class ExampleComponent extends React.Component<any> {
    constructor(props: any, private service: ExampleService) {
        super(props);
        this.service.doStg();
    }

    componentDidMount(): void {
        // You can subscribe for events in your service here
    }

    render(): React.ReactNode {
        return (<div></div>);
    }
}

export default ChangeCounter;

Version logs

@smartbit4all/di-provider v1.0.1

Type: Update

The package has been published.