0.6.0 • Published 2 years ago
iti-react v0.6.0
Iti React
Usage
npm install -S iti-react
Basic Usage
// 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}</>
}
API documentation React
getContainerSetHooks
Generates a set of app specific container hooks
// my-app-hooks.ts
import React, { useContext } from "react"
import { getContainerSetHooks } from "iti-react"
import { getProviders, PizzaAppContainer } from "./_root.store"
export const MyRootCont = React.createContext(<PizzaAppContainer>{})
let mega = getContainerSetHooks(getProviders, MyRootCont)
export const useContainerSet = mega.useContainerSet
// PizzaData.tsx
import { useContainerSet } from "./my-app-hooks"
export const PizzaData = () => {
const containerSet = useContainerSet((containers) => [containers.kitchen])
console.log(containerSet)
return 123
}
useContainer
export const PizzaData = () => {
const [kitchenContainer, err] = useContainer().kitchen
if (!kitchenContainer || err) {
return <>Kitchen is loading</>
}
return <>{kitchenContainer.oven.pizzasInOven}</>
}
useContainerSet
Get multiple containers and autosubscribes to change.
export const PizzaData = () => {
const containerSet = useContainerSet((containers) => [
containers.kitchen,
containers.auth,
])
if (!containerSet) {
return <>Kitchen is loading</>
}
return <>{containerSet.kitchen.oven.pizzasInOven}</>
}
generateEnsureContainerSet
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
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
export const PizzaApp = () => {
return (
<div>
Pizza App:
<EnsureNewKitchenContainer
fallback={<>Pizza App is still loading please wait</>}
>
<NewPizzaPlaceControls />
</EnsureNewKitchenContainer>
</div>
)
}
export const PizzaData = () => {
const { kitchen, pizzaContainer } = useNewKitchenContext()
return (
<div>
<div>Name: {kitchen.kitchen.kitchenName}</div>
<div>Tables: {pizzaContainer.diningTables.tables}</div>
</div>
)
}
Comparison with inversifyjs
, tsyringe
and others
Questions and tips
0.5.0-next.0
2 years ago
0.5.0
2 years ago
0.6.0
2 years ago
0.4.1
2 years ago
0.4.2
2 years ago
0.4.0-next.0
3 years ago
0.3.0-alpha
3 years ago