JSPM

  • Created
  • Published
  • Downloads 1244625
  • Score
    100M100P100Q215433F
  • License MIT

REact Selector Query (resq) - Query React components and children by selector (component name)

Package Exports

  • resq

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (resq) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

    npm install --save resq

Or

    yarn add resq

Usage

If you want to only get the first instance use resq$

import { resq$ } from 'resq'

(async () => {
    const divElements = await resq$('MyComponent div')
    /*
        outputs:
        {
            children: Array,
            name: String,
            node: FiberNode || HTMLElement,
            props: Object,
            state: Object
        }
    */
})()

If you want to get multiple instances, use resq$$

import { resq$$ } from 'resq$'

(async () => {
    const divElements = await resq$$('MyComponent div')
    /*
        outputs:
        [
            {
                children: Array,
                name: String,
                node: FiberNode || HTMLElement,
                props: Object,
                state: Object
            },
            {
                children: Array,
                name: String,
                node: FiberNode || HTMLElement,
                props: Object,
                state: Object
            },
            {
                children: Array,
                name: String,
                node: FiberNode || HTMLElement,
                props: Object,
                state: Object
            }
        ]
    */
})()

API

Both resq$ and resq$$ provide an API to search byProps and/or byState.

import { resq$$ } from 'resq$'

(async () => {
    const myComponent = await resq$('MyComponent') // returns the first instance of <MyComponent />

    const myComponentWithProps = await resq$('MyComponent').byProps({ foo: 'bar' })
    // returns first instance of MyComponent with at least `foo: bar` as props

    // You can also use `myComponent`
    myComponent.byProps({ foo: 'bar' })
})()