Neurological Phenomenon Multiplexer

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

    2.2.0 • Public • Published

    ditox-react

    lemon

    React.js tooling for Ditox.js DI container.

    npm downloads types licence Coverage Status

    Table of Contents

    Features

    • Simple and functional API
    • Container hierarchy
    • Scoped containers
    • Multi-value tokens
    • Typescript 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 {token} from 'ditox';
    import {
      DependencyContainer,
      DependencyModule,
      useDependency,
      useDependencyContainer,
      useOptionalDependency,
    } from 'ditox-react';
    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


    © 2020-2021 Mikhail Nasyrov, MIT license

    Install

    npm i ditox-react

    DownloadsWeekly Downloads

    2

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    74.2 kB

    Total Files

    42

    Last publish

    Collaborators

    • mnasyrov