(e.g. react-dom)\r\n const child = childRef.current\r\n if (child) console.log(child)\r\n }, [])\r\n\r\n // A child element, can live deep down another component\r\n return
\r\n}\r\n```\r\n\r\n### useNearestParent\r\n\r\nReturns the nearest react-reconciler parent instance or the node created from `Reconciler.createInstance`.\r\n\r\nIn react-dom, this would be a DOM element; in react-three-fiber this would be an instance descriptor.\r\n\r\n```tsx\r\nimport * as React from 'react'\r\nimport { useNearestParent } from 'its-fine'\r\n\r\nfunction Component() {\r\n // Returns a React Ref which points to the nearest parent
element.\r\n // Omit the element type to match the nearest element of any kind\r\n const parentRef: React.MutableRefObject
= useNearestParent('div')\r\n\r\n // Access parent Ref on mount\r\n React.useEffect(() => {\r\n // (e.g. react-dom)\r\n const parent = parentRef.current\r\n if (parent) console.log(parent)\r\n }, [])\r\n}\r\n\r\n// A parent element wrapping Component, can live deep up another component\r\n;
\r\n \r\n
\r\n```\r\n\r\n### useContextMap\r\n\r\nReturns a map of all contexts and their values.\r\n\r\n```tsx\r\nimport * as React from 'react'\r\nimport { useContextMap } from 'its-fine'\r\n\r\nconst SomeContext = React.createContext
(null!)\r\n\r\nfunction Component() {\r\n const contextMap = useContextMap()\r\n return contextMap.get(SomeContext)\r\n}\r\n```\r\n\r\n### useContextBridge\r\n\r\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.\r\n\r\nPass `ContextBridge` as a component to a secondary renderer to enable context-sharing within its children.\r\n\r\n```tsx\r\nimport * as React from 'react'\r\n// react-nil is a secondary renderer that is usually used for testing.\r\n// This also includes Fabric, react-three-fiber, etc\r\nimport * as ReactNil from 'react-nil'\r\n// react-dom is a primary renderer that works on top of a secondary renderer.\r\n// This also includes react-native, react-pixi, etc.\r\nimport * as ReactDOM from 'react-dom/client'\r\nimport { type ContextBridge, useContextBridge, FiberProvider } from 'its-fine'\r\n\r\nfunction Canvas(props: { children: React.ReactNode }) {\r\n // Returns a bridged context provider that forwards context\r\n const Bridge: ContextBridge = useContextBridge()\r\n // Renders children with bridged context into a secondary renderer\r\n ReactNil.render({props.children})\r\n}\r\n\r\n// A React Context whose provider lives in react-dom\r\nconst DOMContext = React.createContext(null!)\r\n\r\n// A component that reads from DOMContext\r\nfunction Component() {\r\n // \"Hello from react-dom\"\r\n console.log(React.useContext(DOMContext))\r\n}\r\n\r\n// Renders into a primary renderer like react-dom or react-native,\r\n// DOMContext wraps Canvas and is bridged into Component\r\nReactDOM.createRoot(document.getElementById('root')!).render(\r\n \r\n \r\n \r\n \r\n ,\r\n)\r\n```\r\n\r\n## Utils\r\n\r\nAdditional exported utility functions for raw handling of Fibers.\r\n\r\n### traverseFiber\r\n\r\nTraverses up or down a `Fiber`, return `true` to stop and select a node.\r\n\r\n```ts\r\nimport { type Fiber, traverseFiber } from 'its-fine'\r\n\r\n// Traverses through the Fiber tree, returns the current node when `true` is passed via selector\r\nconst parentDiv: Fiber | undefined = traverseFiber(\r\n // Input Fiber to traverse\r\n fiber as Fiber,\r\n // Whether to ascend and walk up the tree. Will walk down if `false`\r\n true,\r\n // A Fiber node selector, returns the first match when `true` is passed\r\n (node: Fiber) => node.type === 'div',\r\n)\r\n```\r\n","_attachments":{},"homepage":"https://github.com/pmndrs/its-fine","license":"MIT"}![\"It's](\".github/itsfine.jpg\")
\r\n \r\n