React Component selector engine. Provides a querySelectorAll
type interface for React components rendered into a particular tree.
This is designed for development-time implementations only, primarily for react component aware integration testing. It relies on the React Developer tool hooks as well as non-minimized component names. As such it does not take efforts to be high performance or production-level page weight. This closely ties to the internal react implementation and may see breakages on react version upgades.
Basically under no circumstances should this be loaded in a production environment!
Selectors here are a superset of CSS selectors. Most selectors supported by css-select
should work. The format is extended slightly to allod for <ReactComponent>
in the place of a tag selector. This can be treated as if
it were a tag selector and combined with other selectors, i.e. <MyComponent>[prop=1]
would select components whose JSX representation
matches the following <MyComponent prop="1" ... />
.
When the final target is a <ReactComponent>
, the return value will be the instance of the given react component. For DOM nodes the specific
DOM node instance will be returned.
When doing a property selector, all component properties will be run through toString, which could lead to unexpected behavior on objects passed as properties.
ReactSelect.querySelector('<MyComponent> div');
querySelector(selector, [scope]) -> ReactComponent|DOMNode
Returns the first react component or dom node matching the given selector. May optionally be scoped to a given react component or DOM node.querySelectorAll(selector, [scope]) -> Array[ReactComponent|DOMNode]
Returns all react components or dom nodes matching the given selector. May optionally be scoped to a given react component or DOM node.componentDOMNodes(reactComponent) -> Array[DOMNode]
Returns the root-level DOM nodes that a given react component renders to.generatePath(DOMNode) -> string
Returns a react selector that can be used to identify the givedumpTree([scope]) -> [string]
Returns simplified representation of the entire react render tree or optional sub-scope
s
npm run dev
builds the library, then keeps rebuilding it whenever the source files change using rollup-watch.
npm test
builds the library, then tests it.
MIT.