brandi-react

🥃 ⚛️ Brandi-React

Brandi-React is the React bindings layer for Brandi — the dependency injection container. It lets your React components get dependencies from Brandi containers.

Installation

Brandi-React requires React 16.8 or later. You'll also need to install Brandi.

# NPM
npm install brandi-react

# Yarn
yarn add brandi-react

The Brandi-React source code is written in TypeScript but we precompile both CommonJS and ESModule builds to ES2018.

Additionally, we provide builds precompiled to ESNext by esnext, esnext:main and esnext:module fields.

TypeScript type definitions are included in the library and do not need to be installed additionally.

API Reference

• ContainerProvider — makes the Brandi container available to any nested components that need to use injections.
• useInjection(token) — allows you to get a dependency from a container.
• createInjectionHooks(...tokens) — creates hooks for getting dependencies more easily.
• tagged(...tags)(Component, [options]) — attaches tags to the component and all nested components.

You can find the full Brandi documentation on the website.

Example

// index.ts

import { createContainer } from 'brandi';
import { ContainerProvider } from 'brandi-react';
import React from 'react';
import ReactDOM from 'react-dom';

import { TOKENS } from './tokens';
import { ApiService } from './ApiService';
import { App } from './App';

const container = createContainer();

container.bind(TOKENS.apiService).toInstance(ApiService).inTransientScope();

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

// UserComponent.tsx

import { useInjection } from 'brandi-react';
import { FunctionComponent } from 'react';

import { TOKENS } from './tokens';

export const UserComponent: FunctionComponent = () => {
  const apiService = useInjection(TOKENS.apiService);

  /* ... */

  return (/* ... */);
}