Handy React bindings for iti, a ~1kB Typesafe dependency injection framework for TypeScript and JavaScript with a unique support for async flow
npm install iti-react```
npm install -S iti-react
`ts`
// React
export const PizzaData = () => {
const kitchenSet = useContainerSet(["oven", "kitchen"])
if (!kitchenSet) return <>Kitchen is loading >
let inOven = kitchenSet.oven.pizzasInOven()
return <>Pizzaz In Oven: {inOven}>
}
Generates a set of app specific container hooks
`ts
// my-app-hooks.ts
import React, { useContext } from "react"
import { getContainerHooks } from "iti-react"
import { getProviders, PizzaAppContainer } from "./_root.store"
export const MyRootCont = React.createContext(
let mega = getContainerHooks(getProviders, MyRootCont)
export const useContainerSet = mega.useContainerSet
`
`tsx`
// PizzaData.tsx
import { useContainerSet } from "./my-app-hooks"
export const PizzaData = () => {
const containerSet = useContainerSet((containers) => [containers.kitchen])
console.log(containerSet)
return 123
}
`ts
export const PizzaData = () => {
const [kitchenContainer, err] = useContainer().kitchen
if (!kitchenContainer || err) {
return <>Kitchen is loading>
}
return <>{kitchenContainer.oven.pizzasInOven}>
}
`
Get multiple containers and autosubscribes to change.
`ts
export const PizzaData = () => {
const containerSet = useContainerSet((containers) => [
containers.kitchen,
containers.auth,
])
if (!containerSet) {
return <>Kitchen is loading>
}
return <>{containerSet.kitchen.oven.pizzasInOven}>
}
`
###
You can create a simpler API for a portion of your applicatoin to avoid dealing with async in every component. There are some helpfull Context helpers at your service. Also you can use classic props drilling to avoid dealing with async flow in every component
`tsx
import React, { useContext } from "react"
import { useContainerSet } from "../containers/_container.hooks"
import { generateEnsureContainerSet } from "iti-react"
const x = generateEnsureContainerSet(() =>
useContainerSet(["kitchen", "pizzaContainer", "auth"]),
)
export const EnsureNewKitchenContainer = x.EnsureWrapper
export const useNewKitchenContext = x.contextHook
`
`tsx
export const PizzaApp = () => {
return (
Pizza App:
>
)
}
export const PizzaData = () => {
const { kitchen, pizzaContainer } = useNewKitchenContext()
return (
Comparison with
inversifyjs, tsyringe` and others