Ensure Sync Containers

work in progress

./src/_containers-react/EnsureEcommerce.tsx

import React, { useContext } from "react"
import { generateEnsureItems } from "iti-react"
import { useItems } from "./_editor-app-hooks"

const x = generateEnsureItems(() => useItems(["ecommerce", "auth"]))
export const EnsureEcommerceContainer = x.EnsureWrapper
export const useEcommerceContext = x.contextHook

API Naming Update in v0.8.0

• generateEnsureContainerSet → generateEnsureItems (new recommended name)
• useContainerSet → useItems (new recommended name)

The old names still work but are deprecated.

./src/App.tsx

import { EnsureEcommerceContainer } from "./_containers-react/EnsureEcommerce"

export const App = () => (
  <div className="App">
    <EnsureEcommerceContainer fallback={<>Loading</>}>
      <MainApp />
    </EnsureEcommerceContainer>
  </div>
)

./src/Currency.tsx

import { useEcommerceContext } from "../../../../_containers-react/EnsureEcommerce"

export const CurrencyInfo = () => {
  const { currencyStore, taxStore } = useEcommerceContext().ecommerce

  return <div>{currencyStore.currency}</div>
}