ditox-react
TypeScript icon, indicating that this package has built-in type declarations

2.4.1 • Public • Published

ditox-react package

lemon

Dependency injection container for React.js

Please see the documentation at ditox.js.org

npm stars types licence coverage

Installation

You can use the following command to install this package:

npm install --save ditox-react

The packages can be used as UMD modules. Use jsdelivr.com CDN site to load ditox and ditox-react:

<script src="//cdn.jsdelivr.net/npm/ditox/dist/umd/index.js" />
<script src="//cdn.jsdelivr.net/npm/ditox-react@2.3.0/dist/umd/index.js" />
<script>
  const container = Ditox.createContainer();
  // DitoxReact.useDependency(SOME_TOKEN);
</script>

Overview

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.

Usage Examples

import {token} from 'ditox';
import {
  DependencyContainer,
  useDependency,
  useDependencyContainer,
  useOptionalDependency,
} from 'ditox-react';

const FOO_TOKEN = token();
const BAR_TOKEN = token();

function appDependencyBinder(container) {
  container.bindValue(FOO_TOKEN, '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_TOKEN);

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

  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>
  );
}

This project is licensed under the MIT license.

Package Sidebar

Install

npm i ditox-react

Weekly Downloads

48

Version

2.4.1

License

MIT

Unpacked Size

66.3 kB

Total Files

40

Last publish

Collaborators

  • mnasyrov