deku-component-find-class
v1.0.1
Published
Utility to locate components by class name in a Deku component tree
Downloads
6
Readme
deku-component-find-class
Traverse a Deku component tree and return all components with a given class name.
Adapted from react-shallow-testutils
Example
import {findAllWithClass, findWithClass} from 'deku-component-find-class'
import element from 'virtual-element'
import Mock from 'component-mock'
const Component = {
render: function () {
element('div', {class: 'Main'}, [
element('span', {class: 'Main-greeting'}, 'Hello World!'),
element('ul', {class: 'Main-names Names'}, [
element('li', {class: 'Names-item'}, 'Foo'),
element('li', {class: 'Names-item'}, 'Bar'),
element('li', {class: 'Names-item'}, 'Baz')
])
])
}
}
const mock = Mock(Component)
const node = mock.render()
// Return a Deku node
let greetingElement = findWithClass(node, 'Main-greeting')
console.log(greetingElement.attributes.class) //=> `Main-greeting`
// Return an array of Deku nodes
let listItems = findWithClass(node, 'Names-item')
console.log(listItems.length) //=> `3`
// Search for multiple class names
let listElement = findWithClass(node, 'Main-names.Names')
// This will throw
let listItem = findWithClass(node, 'Names-item')
API
findWithClass(node, class)
Returns a single node found within node
that has class
. This will throw an error if more than one node is found.
findAllWithClass(node, class)
Returns an array of nodes found within node
that have class
.
License
MIT