1.0.0 • Published 7 years ago
@lab009/hunter v1.0.0
@lab009/hunter
Walk a React element tree, executing a provided visitor function against each element.
TOCs
Introduction
This is a extract of the implementation within the awesome react-apollo
project. I've come to find many use-cases for it in my own projects and want to avoid code duplication.
With this you could, for example, perform pre-rendering parses on your React element tree to do things like data prefetching. 🤛
Example
In the below example we walk the tree and execute the getValue
function on every element instance that has the function available. We then push the value into a values array.
import hunter from '@lab009/hunter'
class Foo extends React.Component {
constructor(props) {
super(props)
this.getValue = this.getValue.bind(this)
}
getValue() {
return this.props.value
}
render() {
return <div>{this.props.children}</div>
}
}
const app = (
<div>
<h1>Hello World!</h1>
<Foo value={1} />
<Foo value={2}>
<Foo value={4}>
<Foo value={5} />
</Foo>
</Foo>
<Foo value={3} />
</div>
)
const values = []
/**
* Visitor to be executed on each element being walked.
*
* @param element - The current element being walked.
* @param instance - If the current element is a Component or PureComponent
* then this will hold the reference to the created
* instance. For any other element type this will be null.
* @param context - The current "React Context". Any provided childContexTypes
* will be passed down the tree.
*
* @return `undefined` if you want to continue walking down the current branch,
* or return `false` if you wish to stop the traversal down the
* current branch. Stopping the traversal can be quite handy if
* you want to resolve a Promise for example. You can wait for the
* Promise to resolve and then execute a function to continue
* traversal of the branch where you left off.
*/
function visitor(element, instance, context) {
if (instance && typeof instance.getValue) {
values.push(instance.getValue())
}
};
hunter(app, visitor)
console.log(values) // [1, 2, 4, 5, 3];
FAQs
Let me know if you have any...
1.0.0
7 years ago