@ditox/react

React.js tooling for Ditox.js DI container.

Table of Contents

• Features
• Installation
• Usage
• Dependency modules
• API References

Features

• Simple and functional API
• Container hierarchy
• Scoped containers
• Multi-value tokens
• Typescript and Flow typings
• Supports Node.js, Deno and browsers

Installation

Install with npm

npm install ditox @ditox/react --save

Or yarn

yarn add ditox @ditox/react

Usage

@ditox/react is a set of helpers for providing and using a dependency container in React apps:

• Components:
  • DepencencyContainer - provides a new or existed container to React components.
  • DepencencyModule - binds a dependency module to a new container.
  • CustomDepencencyContainer - provides an existed dependency container.
• Hooks:
  • useDependencyContainer() - returns a provided dependency container.
  • useDependency() - returns a resolved value by a specified token. It throws an error in case a container or value is not found.
  • useOptionalDependency() - returns a resolved value by a specified token, or returns undefined in case a container or value is not found.

Examples:

import {
  DependencyContainer,
  DependencyModule,
  useDependency,
  useDependencyContainer,
  useOptionalDependency,
} from '@ditox/react';
import {token} from 'ditox';
import {LOGGER_MODULE} from './logger';

const FOO = token();
const BAR = token();

function appDependencyBinder(container) {
  container.bindValue(FOO, 'foo');
}

function App() {
  return (
    <DependencyContainer binder={appDependencyBinder}>
      <NestedComponent />
    </DependencyContainer>
  );
}

function NestedComponent() {
  // Get access to the container
  const container = useDependencyContainer();

  // Use a resolved value
  const foo = useDependency(FOO);

  // Use an optional value. It is not provided in this example.
  const bar = useOptionalDependency(BAR);

  useEffect(() => {
    console.log({foo, bar}); // {foo: 'foo', bar: undefined}
  }, [foo, bar]);

  return null;
}

Dependency modules

Dependency modules can be provided to the app with <DependencyModule /> component:

function App() {
  return (
    <DependencyModule module={LOGGER_MODULE}>
      <NestedComponent />
    </DependencyModule>
  );
}

API References

• ditox
• @ditox/react

© 2020-2021 Mikhail Nasyrov, MIT license