traversal

@remote-ui/traversal

This package provides a set of utility functions for finding components within a @remote-ui/core RemoteRoot.

Installation

Using yarn:

yarn add @remote-ui/traversal

or, using npm:

npm install @remote-ui/traversal --save

Usage

find()

Returns the nearest descendant RemoteComponent whose type matches the passed type.

import {createRemoteRoot} from '@remote-ui/core';
import {find} from '@remote-ui/traversal';

const root = createRemoteRoot(() => {});
const buttonGroup = root.createComponent('ButtonGroup');

buttonGroup.append(root.createComponent('Button'));
root.append(buttonGroup);

const button = find(root, 'Button');

You can optionally pass a props argument as the third parameter. This will find a matching component with a matching subset of props.

import {createRemoteRoot} from '@remote-ui/core';
import {find} from '@remote-ui/traversal';

const root = createRemoteRoot(() => {});
const buttonGroup = root.createComponent('ButtonGroup');
const buttonOne = root.createComponent('Button', {id: 'one'});

buttonGroup.append(buttonOne);
buttonGroup.append(root.createComponent('Button', {id: 'two'}));
root.append(buttonGroup);

const buttonTwo = find(root, 'Button', {id: 'two'});

findAll()

Like find(), but returns all matching components in an array.

closest()

Returns the component passed as the first argument, if it matches the type (and optional props) passed to this function, or returns the first matching ancestor that does match by traversing recursively through all parents.

import {createRemoteRoot} from '@remote-ui/core';
import {closest} from '@remote-ui/traversal';

const root = createRemoteRoot(() => {});
const buttonGroup = root.createComponent('ButtonGroup');
const button = root.createComponent('Button');

buttonGroup.append(button);
root.append(buttonGroup);

const foundButtonGroup = closest(button, 'ButtonGroup'); // same as buttonGroup