@cawfree/react-search-props

Recurse through the React DOM in search of a named prop. Compatible with React and React Native.

🤔 About

This library accumulates all of the values of a specific named prop inherited by all children of a specified node. There are plenty of caveats to its use, and you should likely never need to use this at all. Normally, ascertaining the values of particular props is achieved using either a well structured application state using a framework such as redux, or via a child-to-parent callback interface.

You will only ever need to use this if you're doing something intentionally hacky.

This library exports a single function:

searchPropsByName(
  ref, // PropTypes.element.isRequired,
  inSearchOf, // PropTypes.string (defaults to 'onPress'),
);

And returns an array of the accumulated values. That's it.

🚀 Getting Started

Using npm:

npm install --save @cawfree/react-search-props

Using yarn:

yarn add @cawfree/react-search-props

✍️ Example

Below, we show how to recurse through rendered JSX in search of any props named onPress. Starting at the root node, we programmatically resolve the onPress function that is supplied to the child <View/>. This is returned as an array in the form [(f)].

import React from 'react';
import { View } from 'react-native';

import searchPropsByName from '@cawfree/react-search-props';

class App extends React.Component {
  componentDidMount() {
    const { root } = this.refs;
    const [ onPress ] = searchPropsByName(
      root,
      'onPress',
    );
    console.log(onPress()); // 'hi'
  }
  render() {
    <View
      ref="root"
    >
      <View
        onPress={() => 'hi'}
      />
    </View>
  }
}

✌️ License

MIT