intuit / intuit/devtools-ds

Feature request: Ability to control the hovered node in the DOM Inspector

Open
#33 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
272
Forks
15
PR merge metrics
No merged PRs in 30d

Description

**Is your feature request related to a problem? Please describe.**

I'm looking for a way to emulate the browser's "highlight" behaviour when using the DOM inspector, where when a node is hovered in the DOM tree the corresponding DOM node in the visible document is highlighted.

Image

**Describe the solution you'd like**

It would be great if there were a way to hook into the the hover state of the `DOMInspector` component. I'd see this working as a controlled version of the component where the Node to display as highlighted could be configured by props. Similar to:

```
interface DOMInspectorProps {
hoveredNode: Node;
onNodeHover: (node: Node) => void
}
```

I could then store the hovered node in state further up the tree and use some custom code to control the visible highlight in the document.

**Describe alternatives you've considered**

**Additional context**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.