{"bugs":{"url":"https://github.com/baruchvlz/resq/issues"},"dist":{"shasum":"d945596408dc47f666cd9cdd0b00525759be834d","tarball":"https://registry.npmjs.org/resq/-/resq-1.9.1.tgz","fileCount":6,"integrity":"sha512-afRChOCR8S+PpPw34A2Nc9fCJ8GpAPkN0+oQ3ryiwaa9noxXsXWZ5mU399arXeOv13FxgrmteyaybeYLcdLdNg==","signatures":[{"sig":"MEQCIDWeKtoDpIXV7L7zT0+kRs95OpXp66X4MMIebY2facJ1AiBvIxodaRhWu9Y1KDce0h59MNbBjEMNaz5aEGzhI0r5ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiHh1CRA9TVsSAnZWagAA1F8P/R/DZhhNgtJpRYxdM8JI\nnz65FO9S/mkDlOvbFykPfYnlPEFDF8CCJV/LegVpKGh//IcjHts3EibWEDf9\nrv47vtYhGIFrO+ejbF/D4Xc8t+dDsv6Uij0SpeAtwkQsR84xAkjwlDARJyXS\niR1DlwMsOaWbZ/SvDuvEzIkSSJnFpQVI2a+kM/I/tkaEL4yyf7etdFFfrUrV\nNxJMZu7AEMh4tXg/w4+LfCarGC+o5oOBEqycqE0t/ZVLAvoJsw7V2dwkuRwW\n/uhbXOqj4FnGMJvlrcRmnUeaaX7gQw5zbxZQ1au6bFzvNIagpRv8FcObyIO5\nw/dJCVNLYcLSdBL+crFAKMMk96roNwHpvmXg9eU1pQ1ojpH6tNWESSC89VWP\ngYnorDwIGOS0hvOQg037C8q4p2Czi/lqi+hMEgqqc29DoPcYQub2daERIbVE\nDOdoLQuuUdJPv0J0dDI9pgySp8xHJ5c9VYzGM4UBk58l6xARUVq+lfoZ45fl\naesa1WBCmT+pZzazKlFbcgh97w98xS0EBgkUvogwB/5oxX5WefhLCRhnIWtr\n8OHzpkpi8KC6RMeYHTGwDbbN9xYL0HEujOX8bv74k4N8QYKhrDM2HQ1+gkvx\n0Zo+CGrQ3QPFAjLcVQgRnHsdYX/re+bikdSC5uVVaTylKiesef3fOiChL+bs\n99Cq\r\n=Q+IE\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.jsx?$":"babel-jest"},"coverageThreshold":{"global":{"lines":100,"branches":97,"functions":100,"statements":100}},"testPathIgnorePatterns":["node_modules","dist"]},"main":"dist/index.js","name":"resq","author":{"name":"Baruch Velez","email":"baruchvelez@gmail.com"},"readme":"# resq (React Element Selector Query) ![npm](https://img.shields.io/npm/v/resq.svg) [![Build Status](https://travis-ci.org/baruchvlz/resq.svg?branch=master)](https://travis-ci.org/baruchvlz/resq) [![codecov](https://codecov.io/gh/baruchvlz/resq/branch/master/graph/badge.svg)](https://codecov.io/gh/baruchvlz/resq)\r\n\r\n## Requirements\r\n\r\n- React v16 or higher\r\n- Node 8 or higher\r\n- React DevTools (optional)\r\n\r\nThis library tries to implement something similar to `querySelector` and `querySelectorAll`, but through the React VirtualDOM. You can query for React composite elements or HTML elements. It provides two functions `resq$` and `resq$$` for selecting one or multiple components, respectively.\r\n\r\n## Installation\r\n\r\n```\r\n$ npm install --save resq\r\n\r\n$ yarn add resq\r\n```\r\n\r\n## Usage\r\n\r\nTo get the most out of the library, we recommend you use React Dev Tools to verify the component names you want to select. Granted for basic usage you don't need this as long as you know the component name beforehand, but for Styled components and MaterialUI components it will be of great help.\r\n\r\n\r\n#### Type definition\r\n```typescript\r\n\r\ninterface RESQNode {\r\n    name: 'MyComponent',\r\n    node: HTMLElement | null,\r\n    isFragment: boolean,\r\n    state: string | boolean | any[] | {},\r\n    props: {},\r\n    children: RESQNode[]\r\n}\r\n\r\nresq$(selector: string, element?: HTMLElement): RESQNode\r\nresq$$(selector: string, element?: HTMLElement): Array<RESQNode>\r\n\r\n```\r\n\r\n* [Basic Usage](README.md#basic-usage)\r\n* [Wildcard selection](README.md#wildcard-selection)\r\n* [Async selection](README.md#async-selection)\r\n* [Filtering selection](README.md#filtering-selection)\r\n\r\n#### Basic Usage\r\nTake this React App:\r\n\r\n```jsx\r\n// imports\r\n\r\nconst MyComponent = () => (\r\n    <div>My Component</div>\r\n)\r\n\r\nconst App = () => (\r\n    <div><MyComponent /></div>\r\n)\r\n\r\nReactDOM.render(<App />, document.getElementById('root'))\r\n```\r\n\r\nSelecting `MyComponent`:\r\n\r\n```js\r\nimport { resq$ } from 'resq'\r\n\r\nconst root = document.getElementById('root');\r\nresq$('MyComponent', root);\r\n/*\r\n{\r\n    name: 'MyComponent',\r\n    node: <div />,\r\n    isFragment: false,\r\n    state: {},\r\n    props: {},\r\n    children: []\r\n}\r\n*/\r\n```\r\n\r\n#### Wildcard selection\r\n\r\nYou can select your components by partial name use a wildcard selectors:\r\n\r\n```jsx\r\n// imports\r\n\r\nconst MyComponent = () => (\r\n    <div>My Component</div>\r\n)\r\n\r\nconst MyAnotherComponent = () => (\r\n    <div>My Another Component</div>\r\n)\r\n\r\nconst App = () => (\r\n    <div>\r\n        <MyComponent />\r\n        <MyAnotherComponent />\r\n    </div>\r\n)\r\n\r\nReactDOM.render(<App />, document.getElementById('root'))\r\n```\r\n\r\nSelecting both components by wildcard:\r\n```js\r\nimport { resq$$ } from 'resq'\r\n\r\nconst root = document.getElementById('root');\r\nresq$$('My*', root);\r\n/*\r\n[\r\n    {\r\n        name: 'MyComponent',\r\n        node: <div />,\r\n        isFragment: false,\r\n        state: {},\r\n        props: {},\r\n        children: []\r\n    },\r\n    {\r\n        name: 'MyAnotherComponent',\r\n        node: <div />,\r\n        isFragment: false,\r\n        state: {},\r\n        props: {},\r\n        children: []\r\n    },\r\n]\r\n*/\r\n```\r\n\r\nSelecting `MyAnotherComponent` by wildcard:\r\n```js\r\nimport { resq$ } from 'resq'\r\n\r\nconst root = document.getElementById('root');\r\nresq$('My*Component', root);\r\n/*\r\n{\r\n    name: 'MyAnotherComponent',\r\n    node: <div />,\r\n    isFragment: false,\r\n    state: {},\r\n    props: {},\r\n    children: []\r\n}\r\n*/\r\n```\r\n\r\n#### Async selection\r\n\r\nGoing by the same example as in [basic usage](README.md#basic-usage), if you don't want to pass the root element to the function, you can do it this way:\r\n\r\n```js\r\nimport { resq$, waitToLoadReact } from 'resq'\r\n\r\nasync function getReactElement(name) {\r\n    try {\r\n        await waitToLoadReact(2000) // time in MS to wait before erroring\r\n\r\n        return resq$(name)\r\n    } catch (error) {\r\n        console.warn('resq error', error)\r\n    }\r\n}\r\n\r\ngetReactElement('MyComponent')\r\n```\r\n\r\n\r\n#### Filtering selection\r\n\r\nYou can filter your selections `byState` or `byProps`. These are methods attached to the RESQNode return objects.\r\n\r\nExample app:\r\n```jsx\r\n// imports\r\n\r\nconst MyComponent = ({ someBooleanProp }) => (\r\n    <div>My Component {someBooleanProp ? 'show this' : ''} </div>\r\n)\r\n\r\nconst App = () => (\r\n    <div>\r\n        <MyComponent />\r\n        <MyComponent someBooleanProp={true} />\r\n    </div>\r\n)\r\n\r\nReactDOM.render(<App />, document.getElementById('root'))\r\n```\r\n\r\nTo select the first instance of `MyComponent` where `someBooleanProp` is true:\r\n\r\n```js\r\nimport { resq$ } from 'resq'\r\n\r\nconst root = document.getElementById('root')\r\nconst myComponent = resq$('MyComponent', root)\r\nconst filtered = myComponent.byProps({ someBooleanProp: true })\r\n\r\nconsole.log(filtered)\r\n/*\r\n{\r\n    name: 'MyComponent',\r\n    node: <div />,\r\n    isFragment: false,\r\n    state: {},\r\n    props: {\r\n        someBooleanProp: true,\r\n    },\r\n    children: []\r\n}\r\n*/\r\n\r\n```\r\n","gitHead":"62256bb516e6ab774baf66f69c4f62ca3fef4ae1","license":"MIT","scripts":{"lint":"eslint . --fix","test":"jest ./tests --verbose --coverage","build":"webpack","commit":"git-cz","prepush":"npm run test --coverage","prebuild":"rimraf dist","test:dev":"jest ./tests --coverage --watch","prepublish":"yarn test && yarn build"},"_npmUser":{"name":"baruchvlz","email":"baruchvelez@gmail.com"},"homepage":"https://github.com/baruchvlz/resq#readme","keywords":["react","selector","resq","rescue","queryselector","query"],"repository":{"url":"git+https://github.com/baruchvlz/resq.git"},"_npmVersion":"6.14.8","description":"React Element Selector Query (resq) - Query React components and children by selector (component name)","directories":{},"maintainers":[{"name":"baruchvlz","email":"baruchvelez@gmail.com"}],"_nodeVersion":"12.19.0","dependencies":{"fast-deep-equal":"^2.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"24.5.0","eslint":"5.15.3","rimraf":"^2.6.3","codecov":"^3.3.0","webpack":"^4.29.6","@babel/cli":"7.2.3","babel-jest":"24.5.0","@babel/core":"7.4.0","npm-run-all":"4.1.5","webpack-cli":"^3.3.0","babel-eslint":"10.0.1","babel-loader":"^8.0.6","@babel/runtime":"^7.4.2","@babel/preset-env":"7.4.1","eslint-plugin-jest":"22.4.1","@babel/plugin-transform-runtime":"7.4.0"},"_npmOperationalInternal":{"tmp":"tmp/resq_1.9.1_1602779252992_0.718891141315857","host":"s3://npm-registry-packages"},"_id":"resq@1.9.1","version":"1.9.1"}