react-get-element

To get the element in the path string from 'React Component'

Usage no npm install needed!

<script type="module">
  import reactGetElement from 'https://cdn.skypack.dev/react-get-element';
</script>

README

react-get-element

To get the HTML DOM Element in the path string from 'React Component'.

  • Like jquery|.get()
  • In easy-to-understand
  • It can be obtained in the path, such as the div.span.p and table:class1.tbody
  • Recommended be used in React Component of test(bdd)

Installation

npm install react-get-element --save

import getElement from 'react-get-element';

Usage

  • The path in the tag, id or class name
  • Symbols
    • Hierarchy with a .
    • # to id
    • : to class name

Tags specified

export default class Foo extends React.Component {
  render() {
    return (
      <div id="root">
        <div id="main">
          <div className="class1">
            <span>span-text</span>
          </div>
          <p className="class2">test</p>
          <p>p-text1</p>
          <p>p-text2</p>
        </div>
      </div>
    );
  }
}

const component = ReactTestUtils.renderIntoDocument(<Foo />);
const elements = ReactTestUtils.findAllInRenderedTree(component, c => c.id ? c.id === 'main' : false);

getElement(elements, "div#main.div:class1");
// => div element

getElement(elements, "div#main.p:class2");
// => p element

getElement(elements, "div#main.p:class2");
// => p element

getElement(elements, "div.span");
// => span element

getElement(elements, "svg");
// => undefined

Features

  • It returns an array when there is more than one
  • If there is something..

Development

  • Check in the npm run at the project root directory.
npm install
npm run build

npm run test
npm run lint

LICENSE

MIT