tagged

The tagged(...tags)(Component, [options]) HoC attaches tags to the component and its child components.

Conditional Bindings are detailed in Conditional Bindings section of the documentation.

Arguments

tagged(...tags)

1. ...tags: Tag[] — tags to be attached to the component.

tagged(...tags)(Component, [isolated])

1. Component: React.ComponentType — component to be wrapped.
2. [options]: TaggedOptions
   • isolated: boolean — by default, the wrapped component and its child components inherit tags from from the upstream tagged components. You can use isolated option to disable this behavior.

Returns

React.ComponentType — the wrapped component.

Example

tags.ts

import { tag } from 'brandi';
import { tagged } from 'brandi-react';

export const TAGS = {
  offline: tag('offline'),
};

export const withOfflineTag = tagged(TAGS.offline);

index.tsx

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

import { TOKENS } from './tokens';
import { TAGS } from './tags';
import { ApiService, OfflineApiService } from './ApiService';
import { App } from './App';

const container = createContainer();

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

container
  .when(TAGS.offline)
  .bind(TOKENS.apiService)
  .toInstance(OfflineApiService)
  .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 = () => {
  /*    ↓ Will be `ApiService`. */
  const apiService = useInjection(TOKENS.apiService);

  /* ... */

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

SettingsComponent.tsx

import { useInjection } from 'brandi-react';

import { TOKENS } from './tokens';
import { withOfflineTag } from './tags';

/*                               ↓ Tags the component. */
export const SettingsComponent = withOfflineTag(() => {
  /*    ↓ Will be `OfflineApiService`. */
  const apiService = useInjection(TOKENS.apiService);

  /* ... */

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