(e.g. react-dom)\n const parent = parentRef.current\n if (parent) console.log(parent)\n }, [])\n}\n\n// A parent element wrapping Component, can live deep up another component\n;
\n \n
\n```\n\n### useContextBridge\n\nReact Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a `ContextBridge` of live context providers to pierce Context across renderers.\n\nPass `ContextBridge` as a component to a secondary renderer to enable context-sharing within its children.\n\n```tsx\nimport * as React from 'react'\n// react-nil is a secondary renderer that is usually used for testing.\n// This also includes Fabric, react-three-fiber, etc\nimport * as ReactNil from 'react-nil'\n// react-dom is a primary renderer that works on top of a secondary renderer.\n// This also includes react-native, react-pixi, etc.\nimport * as ReactDOM from 'react-dom/client'\nimport { type ContextBridge, useContextBridge, FiberProvider } from 'its-fine'\n\nfunction Canvas(props: { children: React.ReactNode }) {\n // Returns a bridged context provider that forwards context\n const Bridge: ContextBridge = useContextBridge()\n // Renders children with bridged context into a secondary renderer\n ReactNil.render(
{props.children})\n}\n\n// A React Context whose provider lives in react-dom\nconst DOMContext = React.createContext
(null!)\n\n// A component that reads from DOMContext\nfunction Component() {\n // \"Hello from react-dom\"\n console.log(React.useContext(DOMContext))\n}\n\n// Renders into a primary renderer like react-dom or react-native,\n// DOMContext wraps Canvas and is bridged into Component\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n \n ,\n)\n```\n\n## Utils\n\nAdditional exported utility functions for raw handling of Fibers.\n\n### traverseFiber\n\nTraverses up or down a `Fiber`, return `true` to stop and select a node.\n\n```ts\nimport { type Fiber, traverseFiber } from 'its-fine'\n\n// Traverses through the Fiber tree, returns the current node when `true` is passed via selector\nconst parentDiv: Fiber | undefined = traverseFiber(\n // Input Fiber to traverse\n fiber as Fiber,\n // Whether to ascend and walk up the tree. Will walk down if `false`\n true,\n // A Fiber node selector, returns the first match when `true` is passed\n (node: Fiber) => node.type === 'div',\n)\n```\n","readmeFilename":"README.md"}![\"It's](\".github/itsfine.jpg\")
\n \n