@redtea/react-inversify

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@redtea/react-inversify
3211.0.14 years ago4 years agoMinified + gzip package size for @redtea/react-inversify in KB

Popular Searches

Readme

react-inversify
Collection of decorators and hooks for interaction with InversifyJS container within React components.
<a href="https://www.npmjs.com/package/@redtea/react-inversify"><img src="https://img.shields.io/npm/v/@redtea/react-inversify.svg" alt="Version" /></a>

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() {
        // ...
    }
}