ditox-react
v3.0.0
Published
Dependency injection container for React.js
Downloads
3,583
Maintainers
Readme
ditox-react package
Dependency injection container for React.js
Please see the documentation at ditox.js.org
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/[email protected]/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 returnsundefined
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.