react-inversify

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

RU

Installation

Yarn
``bash
$ yarn add -E @redtea/react-inversify
`
Npm
`bash
$ npm install -E @redtea/react-inversify
`

Example

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

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

Before usage

Connect container

`typescript
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(TYPES.service);
return service.getMessage();
}

const App: React.FC<{container: Container}> = (props) => (



);

const container = new Container();

// ...binding services to container

ReactDOM.render(, 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)

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

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

#### useService(id)

↑ back

Get service by identifier id.

(see Container.get)

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

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

#### useAllServices(id)

↑ back

Get all services by identifier id.

(see Container.getAll)

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

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

#### useNamedService(id, named)

↑ back

Get service by identifier id and name named.

(see Container.getNamed)

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

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

#### useAllNamedServices(id, named)

↑ back

Get all services by identifier id and name named.

(see Container.getAllNamed)

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

function ReactComponent(props: {}) {
const services = useAllNamedService(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)

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

function ReactComponent(props: {}) {
const service = useTaggedService(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)

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

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

#### useResolve(constructor)

↑ back

Create service instance within container context.

(see Container.resolve)

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

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

Decorators

* [injectContainer(propName, [options])](#injectcontainerpropname-options)
* [injectService(propName, id, [options])](#injectservicepropname-id-options)
* [injectAllServices(propName, id, [options])](#injectallservicespropname-id-options)
* [injectNamedService(propName, id, named, [options])](#injectnamedservicepropname-id-named-options)
* [injectAllNamedServices(propName, id, named, [options])](#injectallnamedservicespropname-id-named-options)
* [injectTaggedService(propName, id, key, value, [options])](#injecttaggedservicepropname-id-key-value-options)
* [injectAllTaggedServices(propName, id, key, value, [options])](#injectalltaggedservicespropname-id-key-value-options)
* [resolve(propName, constructor, [options])](#resolvepropname-constructor-options)
* options

#### injectContainer(propName, [options])

↑ back

Get container and assign it to prop propName.

(see Container)

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

type Props = {
container?: Container;
}

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

render() {
// ...
}
}
`

#### injectService(propName, id, [options])

↑ back

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

(see Container.get)

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

type Props = {
service?: Service;
}

@injectService('service', TYPES.service)
class ReactComponent extends React.Component {
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)

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

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

@injectAllServices('services', TYPES.service)
class ReactComponent extends React.Component {
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)

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

type Props = {
service?: Service;
}

@injectNamedService('service', TYPES.service, 'name')
class ReactComponent extends React.Component {
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)

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

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

@injectAllNamedServices('services', TYPES.service, 'name')
class ReactComponent extends React.Component {
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)

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

type Props = {
service?: Service;
}

@injectTaggedService('service', TYPES.service, 'key', 'value')
class ReactComponent extends React.Component {
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)

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

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

@injectAllTaggedServices('services', TYPES.service, 'key', 'value')
class ReactComponent extends React.Component {
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)

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

type Props = {
service?: Service;
}

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

render() {
// ...
}
}
`

#### Options

↑ back

Decorator options

* forwardRef(optional): Ref forwarding

`typescript
{
forwardRef?: boolean;
}
`
example
`typescript
import {injectService} from '@redtea/react-inversify';

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