{"_id":"react-dom-instance","_rev":"3-a2e7dae0ec617372f6a1705165f83609","name":"react-dom-instance","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"react-dom-instance","version":"1.0.0","description":"Get react component instances from a DOM node","main":"react-dom-instance.js","scripts":{"test":"jest","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/arqex/react-dom-instance.git"},"keywords":["react","testing","instance","dom"],"author":{"name":"Javier Marquez"},"license":"MIT","bugs":{"url":"https://github.com/arqex/react-dom-instance/issues"},"homepage":"https://github.com/arqex/react-dom-instance#readme","devDependencies":{"@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","@testing-library/react":"^10.0.2","babel-jest":"^25.3.0","jest":"^25.3.0","react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"59c1826b9eb8f740397b2e55ff782f3d9163a85b","_id":"react-dom-instance@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"arqex","email":"javi@arqex.com"},"dist":{"integrity":"sha512-qAClY1CB8j/wUAwaX9n/0zK5x/aMxLYJfhBjXIEYaBzUuqizX0Cu5L8d5GiACNqzkgmMCgb5BIu/HZTRJoof+g==","shasum":"5ff7f51a59020b7e7a1ec4fbd9eb26cc514b9306","tarball":"https://registry.npmjs.org/react-dom-instance/-/react-dom-instance-1.0.0.tgz","fileCount":8,"unpackedSize":5524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemdufCRA9TVsSAnZWagAAGiUP/0ReZY6ho7YSC1IOhA9P\ny5f9NMSouVs4sVujKTR2uyiSEiovQSU2C3jsNNusGHav4s5Pe+xM5YMhd2OJ\nspiJpu/ZBvCqt/nKPaJnQ3bNIMuFjTOC3ZiXZAMThJdQW9chTvroWqR6yiEL\nriFxPT/kNIRu+Nj2xYGZbkwJNp5x36o4vEa7fMWF81JDxbqcpraMpz0jwjfx\nwjVGKaSFM7Ofm0Q43iCy1gpZvmZJfSQ84bFmm+QZtnL0AzK3qiolFo8b7Glr\n+LxaBA1S8nAc/V4A1/22I0soyp5pPgqqeX21IEg4+przo95ynNcIGZERRPx5\nzViAp83nCMtt0DQHCQIjDB2KYDoTG4G13rSsgFbfF9qPAOyMGeIrCG6OAAUb\nmCM7fY2J3zHnApx+LIu3dRU+rl+t+ISrKYgiPdiYYVv5Q9W91Jqx0Py1kunp\nBGhmq+RDgvtqCVYgXBRA830mgbFlTPmJF4wgGs/o1g8eNtklXPFAtivDOnxR\nPI12/QF3WDREb7SpTQ1yuvowSe8bCExPSNdfhJR0+5jAYZTveLFukQIVKUa4\n2Nef1A/3QX5Bqciee/Zf0jXhWpIKAAZora6V9iVJ/A17HVNHZ1aX0t2CcUQ/\nidDPuXAR86sL0wzko8XzQpeT0ydBYFa2VmLiWTnOBHSZR/AUilHjdUKNEWVo\nEOHH\r\n=9fkG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW8G1G1X7XxposHn6vkBfLV5H4nvksScaB6A0fHg+umwIgeNpF7HtWh94Y8eBBDS3jabf+WrIbU1LCRteIi8E+uMA="}]},"maintainers":[{"name":"arqex","email":"javi@arqex.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dom-instance_1.0.0_1587141534990_0.6636455898579254"},"_hasShrinkwrap":false},"1.1.0":{"name":"react-dom-instance","version":"1.1.0","description":"Get react component instances from a DOM node","main":"react-dom-instance.js","scripts":{"test":"jest","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/arqex/react-dom-instance.git"},"keywords":["react","testing","instance","dom"],"author":{"name":"Javier Marquez"},"license":"MIT","bugs":{"url":"https://github.com/arqex/react-dom-instance/issues"},"homepage":"https://github.com/arqex/react-dom-instance#readme","devDependencies":{"@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","@testing-library/react":"^10.0.2","babel-jest":"^25.3.0","jest":"^25.3.0","react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"3c756f0e95a3f2e307f65b68d66b4c627000298f","_id":"react-dom-instance@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"arqex","email":"javi@arqex.com"},"dist":{"integrity":"sha512-mkBoakdhSJ02getU7eJxkEhpssGz7o0zqoyTDzhE0IL3+BOof3QS1DEcVmXPUOwxYgzAStjti+F95w3BWHDPvg==","shasum":"d025503e12b648159b7480239f2b2097554191b9","tarball":"https://registry.npmjs.org/react-dom-instance/-/react-dom-instance-1.1.0.tgz","fileCount":13,"unpackedSize":15450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenCx8CRA9TVsSAnZWagAAwbgP/ilEIpKIBta6GyZfq/6P\nGzLG1sMjHI4482w8NJC39VJS/90MGx3nmW+zUh06Q7jcUYz7H8DvHr0biMvk\nVY10fWIHOeOpcFEaKCE/5NFkFr7DPA/H6TXUZ3EX0t9z4vaLwzsMB7Zfqlz3\nmbrouDT60BU1UUtMSie2lAI+/5Z/lNTJU1zNshGVQy+opLNqdY5TCWQq4lq/\nqLn5I46/TvQlSSL1k9Q12uTUBL0S3WVt8H2HRaAn/srkLzbTEooAiBS2gyXx\n4P4CtuXUWrsEiZVDekESj1bJySneg4f/y7lK/QvUPJ4lJZwSoZrVy4iDB0Z+\n4ZM0lWDgxP9TeNnb+3Lel88+1FG1VNm3B2nI761WegrsmwhUit0zZUFbD9u9\n3OPWWzHEgjvR6og7SkqO1e5HSNRCDSPdquAzEsfcGPXZeMKcULnu01frTV6Z\nonk+MjZZI1yXIpBDdplLoszfZvy2NaDBzZkPgZd+HNrxdozZ/QVazMAuWLMt\nrHyo4rOUR3XarnmuzTR+jpTjigvVa5vSLYbbS3GQtrQMissGz3+QmmYO1uqk\nSwP3CjTbRwSP4Y/qeBrZrGX0vtG5Uj0eFvrzXgDDggH87YnGMH3YBP8Cr3z/\n6AiyMPOavYSlzdGCBQVubBMcnGim34Pn+7GDCKKt0qUzCnxNfr33/gFPawaU\nOS94\r\n=UiAX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHTQejFSxz8arWraklqXP4fyoBqJFxW8PPvSh3ZnR+/QIgfpFboQit6J+9EOqWccFcJLcSWR0dI+TjVNWlQIIeSH8="}]},"maintainers":[{"name":"arqex","email":"javi@arqex.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dom-instance_1.1.0_1587293308112_0.8113360571885482"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-dom-instance","version":"2.0.0","description":"Get react component instances from a DOM node","main":"react-dom-instance.js","scripts":{"test":"jest","test:watch":"jest --watch","coverage":"codecov"},"repository":{"type":"git","url":"git+https://github.com/arqex/react-dom-instance.git"},"keywords":["react","testing","instance","dom"],"author":{"name":"Javier Marquez"},"license":"MIT","bugs":{"url":"https://github.com/arqex/react-dom-instance/issues"},"homepage":"https://github.com/arqex/react-dom-instance#readme","devDependencies":{"@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","@testing-library/react":"^10.0.2","babel-jest":"^25.3.0","codecov":"^3.6.5","jest":"^25.3.0","react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"7865f5b461384871f4a57efac2f64db9a7adeeba","_id":"react-dom-instance@2.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"arqex","email":"javi@arqex.com"},"dist":{"integrity":"sha512-DH5IQOCm2pkRwAuWcNyILQBkmt5JS019LqH7KeakTAK2jMl2v1crLO5oXqqGPXsxP0arjRG7OPO8h/mZVuHADQ==","shasum":"562d7c4a0f140aa1ddd45ee72dadc5336aec6fa1","tarball":"https://registry.npmjs.org/react-dom-instance/-/react-dom-instance-2.0.0.tgz","fileCount":5,"unpackedSize":9285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenGl4CRA9TVsSAnZWagAAnTkP/j43ac54Ru5BdHjN/dcV\n8qW1BW73QpVu9GXVZ2JLx1Fc4+GfLa/DVroAS9WnGUcSNjQQwq9q14eVgEeT\nOo7y/iJS5xfk3OJjt3p+TIC2BtTWDaGQQSNRco5S5cLYfiS1BvhN37L7feD+\nTP/BDx90LnYn8O1ZiG0T/a/J4n5qBviCfVo+8G4kpaZfTHHvyGJMWge7UgYj\nDROQVYLECyhHnJsGCNIUOrxF1Hg/p67ZiDPyULgfEt1oNoF/wUEQ5ApiK7OR\nOUBBWeZjdBB56au99dIcfKJBHs9X5KsBmAmu5eJH+c+ygCJmxS7IXnf5hPwd\nzjksmPXUk7DasH1Pk974kixUMMAU+Lgz/rDWFiuWhncfX6LbLPxUUw4EMI6H\nYmx+6F7Ibk1IkSkUIfWMF2nB0cL6KZW+bxzjd7PLv/OIzLBbBMsh4rWTD5uc\nun6SSfjzAfHifTDoG+Gt0eGhOQKTfvaZSwFH/ARlTFMmG6BcF5kq3TFU7rdu\nZJt6Sxt10BrlO8OS+BIzbgZEip9NepwgcwrzkKGS+3XS/t3wwFBGmTRcw7tj\nK/0QmiOXCGkLvpPZp+9+J/06AQ/SwNR6gAyP/RQ9HHfqac6BEx5MBgWEPw5N\nZCVd5Y8dhLA/CkFQjTPnfqtdGKYoQ9RYyXi1CwESms4enhf4kPjmtLiYaWzZ\n9vze\r\n=g5rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDojx9gonBGGx9Rb9P+IBi3QG/Ae8FKAIaFMoHBM98XqwIhAPrYiF1wrbXtAYX3V0I33goByx+CUmkMI3T1zcQotQt5"}]},"maintainers":[{"name":"arqex","email":"javi@arqex.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dom-instance_2.0.0_1587308919967_0.8155771737595241"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-17T16:38:54.990Z","1.0.0":"2020-04-17T16:38:55.082Z","modified":"2022-05-14T09:47:17.262Z","1.1.0":"2020-04-19T10:48:28.255Z","2.0.0":"2020-04-19T15:08:40.124Z"},"maintainers":[{"name":"arqex","email":"javi@arqex.com"}],"description":"Get react component instances from a DOM node","homepage":"https://github.com/arqex/react-dom-instance#readme","keywords":["react","testing","instance","dom"],"repository":{"type":"git","url":"git+https://github.com/arqex/react-dom-instance.git"},"author":{"name":"Javier Marquez"},"bugs":{"url":"https://github.com/arqex/react-dom-instance/issues"},"license":"MIT","readme":"# react-dom-instance\r\n[![npm version](https://badge.fury.io/js/react-dom-instance.svg)](https://badge.fury.io/js/react-dom-instance) [![CircleCI](https://circleci.com/gh/arqex/react-dom-instance.svg?style=shield)](https://circleci.com/gh/arqex/react-dom-instance) [![Codecov Coverage](https://img.shields.io/codecov/c/gh/arqex/react-dom-instance)](https://codecov.io/gh/arqex/react-dom-instance/)\r\n\r\nWhen using `react-dom`'s `findDOMNode()` we get the HTML node generated by a react component instance.\r\n\r\n`react-dom-instance`'s `findInstance()` goes in the opposite direction: from an HTML node, we get the react component instance that generated it.\r\n\r\n** Only React v16 and higher is supported**\r\n\r\n## How it works\r\n\r\nIf we have some component like the following one:\r\n\r\n```js\r\nimport * as React from 'react';\r\n\r\nclass TestComponent extends React.Component {\r\n  render(){\r\n    return <div id=\"testNode\" data-testid=\"testNode\" />\r\n  }\r\n  sayHello(){\r\n    console.log('Hello!');\r\n  }\r\n}\r\n```\r\n\r\nWe can call the `sayHello` method getting the instance with `react-dom-instance`:\r\n```js\r\nimport { findInstance } from 'react-dom-instance';\r\n\r\nconst node = document.getElementById('testNode');\r\nfindInstance( node ).sayHello(); // 'Hello!' in the console\r\n```\r\n\r\nWe will only find instances from react's class components, functional components has no instances and \r\n\r\n## Installation\r\n\r\n```\r\nnpm install react-dom-instance\r\n```\r\n\r\n## API\r\n\r\n**`findInstance( domNode, {options} )`**\r\n\r\nGiven the root `domNode` generated by a component, it returns the instance of the component. If can't find any instances linked to the `domNode` it returns `false`.\r\n\r\nFunctional components don't have instances, so using `findInstance` with one DOM node generated by them will also return `false`.\r\n\r\nWe can pass some options in order to retrieve the wanted instance from the DOM node:\r\n\r\n**componentName**\r\nSometimes there are more than one component instance linked to a DOM node. For example, when a component `render` method returns another component, or when using higher order components.\r\n\r\nIn those cases we can use `componentName` to tell `findInstace` what type of component instance we want:\r\n\r\n```js\r\n// These 2 components will be linked to the same DOM node\r\nclass ParentComponet extends React.Component {\r\n  render() { return <ChildComponent /> }\r\n}\r\n\r\nclass ChildComponent extends React.Component {\r\n  render() { return <div id=\"sharedNode\" /> }\r\n}\r\n\r\nlet domNode = document.getElementById('sharedNode');\r\n\r\n// Get the instance of the `ParentComponent`\r\nfindInstance( domNode, {componentName: 'ParentComponent'} );\r\n\r\n// By default, `findInstance` returns the instance of the leaf component\r\nfindInstance( domNode ); // ChildComponent instance\r\n```\r\n\r\n**maxIteration**\r\nWhen there are more than one component linked to the same DOM node, `findInstance` navigates recursively through the react fibers looking for the instance of the right component we want. To make this process fast and avoid infinite loops there is a maximum number of iterations that the algorithm does until it decides that the instance can't be found. By default `findInstance` iterates `4` times looking for the instance and return `false` after not finding it.\r\n\r\nIf you have a DOM node with a lot of instances linked and know that more iterations are needed to find the one you want, you can pass `maxIteration` as an option with a bigger number:\r\n\r\n```js\r\nfindInstance( domNode, {componentName: 'MyComponent', maxIterations: 6} );\r\n```\r\n\r\n## Usage with react testing library\r\n\r\nThis library was thought as a helper for testing with react testing library: sometimes it is useful to access to the component instances in order to create tests. \r\n\r\nTo make the integration easier, `findInstance` accepts the container returned by react testing library and know how to extract the instance linked to it:\r\n\r\n```js\r\nimport { render } from '@testing-library/react';\r\nimport { findInstance } from 'react-dom-instance';\r\n\r\nit('should say hello', () => {\r\n  // TestComponent from the first example in this readme\r\n  const { container } = render( <TestComponent /> );\r\n\r\n  findInstance( container ).sayHello();\r\n});\r\n```\r\n\r\nWe can also use the query methods to get instances from components down in the react tree:\r\n\r\n```js\r\nit('should say hello', () => {\r\n  // App component render TestComponent at some point\r\n  const { queryByTestId } = render( <App /> );\r\n\r\n  findInstance( queryByTestId('testNode') ).sayHello();\r\n});\r\n```\r\n\r\n\r\n---\r\n\r\nHere's [the changelog](CHANGELOG.md)\r\n[MIT Licensed](LICENSE)\r\n\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md"}