# jsx-select-utils

> A util can help you find dom by enter CSS selectors in JSX. it has a method,

Latest version **0.0.3** (published 2019-12-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install jsx-select-utils
pnpm add jsx-select-utils
yarn add jsx-select-utils
bun add jsx-select-utils
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-12-10 |
| First published | 2019-12-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | bib1du |

## Links

- npm: https://www.npmjs.com/package/jsx-select-utils
- Repository: https://github.com/bibidu/jsx-select-utils
- Homepage: https://github.com/bibidu/jsx-select-utils#readme
- Issues: https://github.com/bibidu/jsx-select-utils/issues
- npm.io page: https://npm.io/package/jsx-select-utils

## Dependencies (2)

- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.7.4
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.7.4

## Recent versions

- 0.0.3 (latest) — 2019-12-10
- 0.0.2 — 2019-12-09
- 0.0.1 — 2019-12-04

## 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
```js
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:
```js
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"`)

---
_Source: https://npm.io/package/jsx-select-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._