react-inversify

Collection of decorators and hooks for interaction with InversifyJS container within React components.

RU

Installation

Yarn

$ yarn add -E @redtea/react-inversify

Npm

$ npm install -E @redtea/react-inversify

Example

import {useService} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const service = useService<Service>(TYPES.service);
    return service.getMessage();
}

Before usage

Connect container

import 'reflect-metadata';
import React from 'react';
import ReactDOM from 'react-dom';
import {Container} from 'inversify';
import {Context, useService} from '@reatea/react-inversify';

const ReactComponent: React.FC<{}> = (props) => {
    const service = useService<Service>(TYPES.service);
    return service.getMessage();
}

const App: React.FC<{container: Container}> = (props) => (
    <Context.Provider value={props.container}>
        <ReactComponent/>
    </Context.Provider>
);

const container = new Container();

// ...binding services to container

ReactDOM.render(<App container={container} />, document.getElementById('root'));

Hooks

• useContainer()
• useService(id)
• useAllServices(id)
• useNamedService(id, named)
• useAllNamedServices(id, named)
• useTaggedService(id, key, value)
• useAllTaggedServices(id, key, value)
• useResolve(constructor)

useContainer()

↑ back

Get container.

(see Container)

import {useContainer} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const container = useContainer();
    const service = React.useMemo(
        () => container.get<Service>('service'),
        [container]
    );
    return service.getMessage();
}

useService(id)

↑ back

Get service by identifier id.

(see Container.get)

import {useService} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const service = useService<Service>(TYPES.service);
    return service.getMessage();
}

useAllServices(id)

↑ back

Get all services by identifier id.

(see Container.getAll)

import {useAllServices} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const services = useAllServices<Service>(TYPES.service);
    return services
        .map(_ => _.getMessage())
        .join(',');
}

useNamedService(id, named)

↑ back

Get service by identifier id and name named.

(see Container.getNamed)

import {useNamedService} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const service = useNamedService<Service>(TYPES.service, 'name');
    return service.getMessage();
}

useAllNamedServices(id, named)

↑ back

Get all services by identifier id and name named.

(see Container.getAllNamed)

import {useAllNamedService} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const services = useAllNamedService<Service>(TYPES.service, 'name');
    return services
        .map(_ => _.getMessage())
        .join(',');
}

useTaggedService(id, key, value)

↑ back

Get service by identifier id, tag key key и tag value value.

(see Container.getTagged)

import {useTaggedService} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const service = useTaggedService<Service>(TYPES.service, 'key', 'value');
    return service.getMessage();
}

useAllTaggedServices(id, key, value)

↑ back

Get all services by identifier id, tag key key и tag value value.

(see Container.getAllTagged)

import {useAllTaggedService} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const services = useAllTaggedService<Service>(TYPES.service, 'key', 'value');
    return services
        .map(_ => _.getMessage())
        .join(',');
}

useResolve(constructor)

↑ back

Create service instance within container context.

(see Container.resolve)

import {useResolve} from '@redtea/react-inversify';

function ReactComponent(props: {}) {
    const service = useResolve<Service>(Service);
    return service.getMessage();
}

Decorators

• injectContainer(propName, [options])
• injectService(propName, id, [options])
• injectAllServices(propName, id, [options])
• injectNamedService(propName, id, named, [options])
• injectAllNamedServices(propName, id, named, [options])
• injectTaggedService(propName, id, key, value, [options])
• injectAllTaggedServices(propName, id, key, value, [options])
• resolve(propName, constructor, [options])
• options

injectContainer(propName, [options])

↑ back

Get container and assign it to prop propName.

(see Container)

import {Container} from 'inversify';
import {injectContainer} from '@redtea/react-inversify';

type Props = {
    container?: Container;
}

@injectContainer('container')
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        const service = this.props.container!.get<Service>(TYPES.service);
        service.callMethod();
    }

    render() {
        // ...
    }
}

injectService(propName, id, [options])

↑ back

Get service by identifier id and assign it to prop propName.

(see Container.get)

import {injectService} from '@redtea/react-inversify';

type Props = {
    service?: Service;
}

@injectService('service', TYPES.service)
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        this.props.service!.callMethod();
    }

    render() {
        // ...
    }
}

injectAllServices(propName, id, [options])

↑ back

Get all services by identifier id and assign it to prop propsName.

(see Container.getAll)

import {injectAllServices} from '@redtea/react-inversify';

type Props = {
    services?: Service[];
}

@injectAllServices('services', TYPES.service)
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        for (const service of this.props!.services) {
            service.callMethod();
        }
    }

    render() {
        // ...
    }
}

injectNamedService(propName, id, named, [options])

↑ back

Get named service by identifier id, name named and assign it to prop propName.

(see Container.getNamed)

import {injectNamedService} from '@redtea/react-inversify';

type Props = {
    service?: Service;
}

@injectNamedService('service', TYPES.service, 'name')
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        this.props.service!.callMethod();
    }

    render() {
        // ...
    }
}

injectAllNamedServices(propName, id, named, [options])

↑ back

Get all named services by identifier id, name named and assign it to prop propName.

(see Container.getAllNamed)

import {injectAllNamedServices} from '@redtea/react-inversify';

type Props = {
    services?: Service[];
}

@injectAllNamedServices('services', TYPES.service, 'name')
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        for (const service of this.props!.services) {
            service.callMethod();
        }
    }

    render() {
        // ...
    }
}

injectTaggedService(propName, id, key, value, [options])

↑ back

Get tagged service by identifier id, tag key key, tag value value and assign it to prop propName.

(see Container.getTagged)

import {injectTaggedService} from '@redtea/react-inversify';

type Props = {
    service?: Service;
}

@injectTaggedService('service', TYPES.service, 'key', 'value')
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        this.props.service!.callMethod();
    }

    render() {
        // ...
    }
}

injectAllTaggedServices(propName, id, key, value, [options])

↑ back

Get all tagged services by identifier id, tag key key, tag value value and assign it to prop propName.

(see Container.getAllTagged)

import {injectAllTaggedServices} from '@redtea/react-inversify';

type Props = {
    services?: Service[];
}

@injectAllTaggedServices('services', TYPES.service, 'key', 'value')
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        for (const service of this.props!.services) {
            service.callMethod();
        }
    }

    render() {
        // ...
    }
}

resolve(propName, constructor, [options])

↑ back

Create service instance within container context and assign it to prop propName.

(see Container.resolve)

import {resolve} from '@redtea/react-inversify';

type Props = {
    service?: Service;
}

@resolve('service', Service)
class ReactComponent extends React.Component<Props> {
    componentDidMount() {
        this.props.service!.callMethod();
    }

    render() {
        // ...
    }
}

Options

↑ back

Decorator options

• forwardRef(optional): Ref forwarding

{              
    forwardRef?: boolean;
}

example

import {injectService} from '@redtea/react-inversify';

@injectService('service', TYPES.service, {forwardRef: true})
class ReactComponent extends React.Component<{}> {
    render() {
        // ...
    }
}