jsx-select-utils
v0.0.3
Published
A util can help you find dom by enter CSS selectors in JSX. it has a method,
Downloads
4
Readme
jsx-select-utils
A util can help you find dom by enter CSS selectors in JSX. it has a method,
such as,
find(selector: string): array<Node {}>
Usage
const jsxSelect = require('jsx-select-utils')
const code = `
<div className="container">
<div className="title">
<ul className="paragraph">
<li>1</li>
<li>2</li>
</ul>
</div>
<div className="body">
<h1>body</h1>
<ul className="paragraph">
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
`
const ast = require('@babel/parser').parse(code, {
sourceType: "module",
plugins: [
"jsx"
]
})
const { find } = jsxSelect(ast)
// case one
find('div .title').length
// case two
find('ul li').length
// case three
find('.body h1')
Output:
1 // case one
4 // case two
[Node {/* .body下h1节点的AST */}] // case three
Supported selectors
add constantly according to CSS3.
- Tag (
<tagname>
) - ClassName (
className=""
) - Id (
id=""
) - Parent (
className=".a .b"
)