useProvide / useInject

Pass state between parent and child components

Like Vue's provide and inject, ZenBox provides useProvide and useInject for convenient state passing from parent to child components.

function Parent() {
  useProvide("count", 0); // Provide state to child components
  return <Child />;
}

function Child() {
  const count = useInject<number>("count"); // Inject state
  return <div>Count: {count}</div>;
}

Notes:

  • useProvide automatically cleans up state on component unmount.
  • useInject reads the latest value provided by useProvide, but not reactive.
  • useProvide and useInject operate on global state, not isolated by component tree.