# FloatingTree
Provides context for nested floating elements when they are not
children of each other on the DOM.
@floating-ui/react only
This is not necessary in all cases, except when there must be
explicit communication between parent and child floating
elements. It is necessary for:
- The `bubbles{:.key}` option in the `useDismiss(){:js}` Hook
- [Nested virtual list navigation](/docs/useListNavigation#virtualitemref)
- Nested floating elements that each open on hover
- Custom communication between parent and child floating elements
## Usage
The following creates an infinitely nestable `{:js}`
component. Usage of this component must be wrapped in a single
`{:js}` provider:
```js {10-11,15,25,31,38,48}
import {
FloatingTree,
FloatingNode,
useFloatingNodeId,
} from '@floating-ui/react';
function Popover({children, content}) {
const [isOpen, setIsOpen] = useState(false);
// Subscribe this component to the wrapper:
const nodeId = useFloatingNodeId();
// Pass the subscribed `nodeId` to `useFloating`:
const {refs, floatingStyles} = useFloating({
nodeId,
open: isOpen,
onOpenChange: setIsOpen,
});
// Wrap the rendered floating element in a ``,
// passing in the subscribed `nodeId`:
return (
<>
{cloneElement(children, {ref: refs.setReference})}
{isOpen && (
{content}
)}
);
}
function App() {
return (
}
>
);
}
```
## Hooks
- `useFloatingNodeId(){:js}` subscribes the component to the tree
context. Call this only once as it has side effects.
- `useFloatingParentNodeId(){:js}` returns the parent
`FloatingNode{:.class}` id, if it exists. This will be
`null{:js}` for roots (not nested).
- `useFloatingTree(){:js}` for accessing the tree object, which
includes an event emitter to communicate across the tree
components (`events{:.key}`).
```js
interface FloatingTreeType {
nodesRef: React.MutableRefObject>;
events: FloatingEvents;
addNode(node: FloatingNodeType): void;
removeNode(node: FloatingNodeType): void;
}
```
## Custom parent
By default, the parent node is the closest
`{:js}`, but you can specify a custom parent node
by passing in the `parentId` to `useFloatingNodeId(){:js}`:
```js
const nodeId = useFloatingNodeId(parentId);
```
This is useful if you want to mark a sibling floating element in
the React tree as the child of another sibling.
## `{:js}` wrapper
You can use the following technique to avoid having the consumer
specify the `{:js}` wrapper:
```js
function PopoverComponent() {
// Main logic as seen earlier
}
// This is the component the consumer uses
export function Popover(props) {
const parentId = useFloatingParentNodeId();
// This is a root, so we wrap it with the tree
if (parentId === null) {
return (
);
}
return ;
}
```
## Troubleshooting
Ensure that the component that you're calling
`useFloatingNodeId(){:js}` is a _child_ of the
`{:js}` wrapper. If it is not, then it will not be
able to find the tree context.