{"library":"resq","title":"React Element Selector Query (RESQ)","description":"resq (React Element Selector Query) is a JavaScript library designed to query React components and HTML elements within the React Virtual DOM, emulating the functionality of `querySelector` and `querySelectorAll` for native DOM elements. It provides `resq$` for selecting a single matching component and `resq$$` for selecting multiple matches, supporting advanced features like wildcard selector patterns, asynchronous waiting for React to initialize, and filtering results by component state or props. The library is currently stable at version 1.11.0 and requires React v16 or higher. Its primary use cases include automated testing, debugging, and advanced component introspection in client-side React applications. It offers a programmatic interface to the React component tree, allowing developers to access internal component data like props and state through its `RESQNode` return structure.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install resq"],"cli":null},"imports":["import { resq$ } from 'resq'","import { resq$$ } from 'resq'","import { waitToLoadReact } from 'resq'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { resq$, waitToLoadReact } from 'resq';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n// A simple React component for demonstration\nconst MyComponent = () => (\n    <div data-testid=\"my-component\">Hello from MyComponent</div>\n);\n\n// Another component\nconst AnotherComponent = () => (\n    <p>Another one</p>\n)\n\n// The main application component\nconst App = () => (\n    <div>\n        <MyComponent />\n        <AnotherComponent />\n    </div>\n);\n\n// Render the application to the DOM\nconst rootElement = document.createElement('div');\nrootElement.id = 'root';\ndocument.body.appendChild(rootElement);\nReactDOM.render(<App />, rootElement);\n\nasync function queryComponents() {\n    try {\n        // Wait for React to load, then query for 'MyComponent'\n        await waitToLoadReact(1000); // Wait up to 1 second\n\n        const myComponentNode = resq$('MyComponent');\n        if (myComponentNode) {\n            console.log('Found MyComponent:', myComponentNode.name, myComponentNode.node.outerHTML);\n            console.log('MyComponent props:', myComponentNode.props);\n        } else {\n            console.log('MyComponent not found after waiting.');\n        }\n\n        // Query for multiple components using a wildcard\n        const allMyComponents = resq$$('My*');\n        console.log('\\nFound all My* components (count:', allMyComponents.length, '):');\n        allMyComponents.forEach(comp => console.log('- ' + comp.name));\n\n    } catch (error) {\n        console.error('An error occurred during resq query:', error);\n    }\n}\n\nqueryComponents();","lang":"typescript","description":"This quickstart demonstrates how to install `resq`, render a basic React application, and then use `resq$` and `resq$$` to select components from the rendered tree, including waiting for React to load.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}