Full Example Configuration

Basically, we create an ITI instance, add it to React.Context and generate fetch hooks.

./src/_containers/main-app

import { createContainer } from "iti"

export const mainApp = () =>
  createContainer().add(() => ({
    auth: async () => {
      const res = await fetch("/api/profile")
      return {
        profile: res.json(),
      }
    },
  }))
export type MainAppContainer = ReturnType<typeof mainApp>

./src/_containers/hooks

import React from "react"
import { getContainerHooks } from "iti-react"
import { MainAppContainer } from "./_containers/main-app"

export const MyAppContext = React.createContext<MainAppContainer>({})

const hooks = getContainerHooks(MyAppContext)
export const useItems = hooks.useItems
export const useItem = hooks.useItem

API Naming Update in v0.8.0

The function remains getContainerHooks() but the returned hooks have been renamed:

• useContainer → useItem
• useContainerSet → useItems

The old hook names still work but are deprecated.

./src/App.tsx

import React, { useContext } from "react"
import { mainApp } from "./_containers/main-app"
import { MyAppContext } from "./_containers/hooks"
import { Profile } from "./Profile"

function App() {
  const itiContainerInstance = useMemo(() => mainApp(), [])

  return (
    <>
      <MyAppContext.Provider value={itiContainerInstance}>
        <Profile />
      </MyAppContext.Provider>
    </>
  )
}

./src/Profile.tsx

import { useItem } from "./_containers/main-app"

function Profile() {
  const [auth, authErr] = useItem().auth

  if (authErr) return <div>failed to load</div>
  if (!auth) return <div>loading...</div>

  return <div>hello {auth.profile.name}!</div>
}