Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

inversify-react

0.4.0 • Public • Published

inversify-react

Components and decorators to connect react with inversify.

⚠️ This library is in an early stage and doesn't have API set in stone. Major changes can happen without warning. ⚠️

Installation

  • npm install --save react inversify reflect-metadata (dependencies)
  • npm install --save inversify-react

Installation (typescript)

  • in tsconfig.json set
"compilerOptions"{
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"]
}

Installation (babel)

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

React component decorators

@provide

  • creates new container for declaring component and binds given service (using bind(<type>).toSelf().inSingletonScope())
  • the new container inherits all services from parent container in the react tree (using container.parent)
  • requires reflect-metadata and emitDecoratorMetadata

@provide.singleton

  • same behaviour as @provide

@provide.transient

  • same behaviour as @provide except service is bound in transient scope (bind(<type>).toSelf().inTransientScope())

@resolve

  • obtains service from container passed down in the react tree, throws if service cannot be obtained
  • requires reflect-metadata and emitDecoratorMetadata

@resolve(serviceIdentifier)

  • obtains service from container passed down in the react tree, throws if service cannot be obtained

@resolve.optional

  • obtains service from container passed down in the react tree, returns undefined if service cannot be obtained
  • requires reflect-metadata and emitDecoratorMetadata

@resolve.optional(serviceIdentifier, defaultValue?)

  • obtains service from container passed down in the react tree, returns defaultValue if service cannot be obtained
class RootComponent extends React.Component<{}, {}> {
    @provide
    private readonly foo: Foo;
 
    @provide
    private readonly bar: Bar;
 
    render() {
        return <div data-foo={this.foo.name} data-bar={this.bar.name}>{this.props.children}</div>;
    }
}
 
class ChildComponent extends React.Component<{}, {}> {
    @resolve
    private readonly foo: Foo;
 
    @resolve(Bar)
    private readonly bar: any;
 
    render() {
        return <div>{this.foo.name} {this.bar.name}</div>;
    }
}

Components

<Provider />

  • takes container and pushes it down the react tree
  • sets parent of given container to container passed down in the react tree unless standalone is set
  • props:
    • container - container instance to be used
    • standalone - if not falsey, do not set parent of given container to the container passed down in react tree
class RootComponent extends React.Component<{}, {}> {
    constructor(props: any, context: any) {
        super(props, context);
 
        this.container = new Container();
        this.container.bind(Foo).toSelf();
        this.container.bind(Bar).toSelf();
    }
 
    private readonly container: interfaces.Container;
 
    render() {
        return <Provider container={this.container}><div>{this.props.children}</div></Provider>;
    }
}

install

npm i inversify-react

Downloadsweekly downloads

172

version

0.4.0

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability