@remote-ui/traversal
TypeScript icon, indicating that this package has built-in type declarations

1.4.2 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

npm i @remote-ui/traversal

Weekly Downloads

20

Version

1.4.2

License

MIT

Unpacked Size

54.1 kB

Total Files

42

Last publish

Collaborators

  • lemonmade
  • kmdavis
  • shopify-dep