react-inversify

Набор декораторов и хуков для взаимодействия с InversifyJS контейнером в React компонентах.

Установка

Yarn

$ yarn add -E @redtea/react-inversify

Npm

$ npm install -E @redtea/react-inversify

Пример

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

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

Перед использованием

Подключение контейнера

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();

// ...регистрация сервисов в контейнере

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

Хуки

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

useContainer()

↑ back

Получение контейнера.

(см. 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

Получение сервис по идентификатору id.

(см. Container.get)

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

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

useAllServices(id)

↑ back

Получение всех сервисов по идентификатору id.

(см. 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

Получение сервиса по идентификатору id и названию named.

(см. 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

Получение все сервисов по идентификатору id и названию named.

(см. 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

Получение сервиса по идентификатору id, ключу тега key и значению тега value.

(см. 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

Получение все сервисов по идентификатору id, ключу тега key и значению тега value.

(см. 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

Создание экземпляра сервиса в контексте контейнера.

(см. Container.resolve)

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

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

Декораторы

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

Получение контейнера и запись его в prop propName.

(см. 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

Получение сервис по идентификатору id и запись его в prop propName.

(см. 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

Получение всех сервисов по идентификатору id и запись из в prop propsName.

(см. 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

Получение сервиса по идентификатору id, названию named и запись его в prop propName.

(см. 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

Получение все сервисов по идентификатору id, названию named и запись их в prop propName.

(см. 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

Получение сервиса по идентификатору id, ключу тегу key, значению тегу value и запись его в prop propName. (см. 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

Получение все сервисов по идентификатору id, ключу тегу key, значению тегу value и запись их в prop propName.

(см. 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

Создание экземпляра сервиса в контексте контейнера и запись его в prop 'propName`.

(см. 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

Опции декоратора

forwardRef(опционально): Перенаправление ref

{              
    forwardRef?: boolean;
}

пример

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!