@stoplight/tree-list

• View the changelog: Releases
• Features
• Installation
• Usage
• TreeList Props
• TreeList Store
• TreeList Tree
• Contributing

Features

• Component for rendering a tree in a tree like interface
• Drag and drop support
• Context menu support
• Themeable

Installation

Supported in modern browsers.

# latest stable
yarn add @stoplight/tree-list @stoplight/ui-kit

Usage

This is a bare minimum required to have anything rendered.

import { TreeList, TreeStore, Tree } from '@stoplight/tree-list';
import '~@stoplight/tree-list/styles/_tree-list.scss';

const root = Tree.createArtificialRoot();
root.children.push(
  {
    id: generateRandomId(),
    name: 'foo',
    parent: root,
    children: [],
  },
  {
    id: generateRandomId(),
    name: 'bar',
    parent: root,
  },
  {
    id: generateRandomId(),
    name: 'baz',
    parent: root,
    children: [],
  },
);

const store = new TreeStore(new Tree({}, root), new TreeState());

<TreeList store={store} />;

You will also need to make sure the stylesheet is loaded.

@import '~@stoplight/tree-list/styles/tree-list';

Contributing

1. Clone repo.
2. Create / checkout feature/{name}, chore/{name}, or fix/{name} branch.
3. Install deps: yarn.
4. Make your changes.
5. Run tests: yarn test.prod.
6. Stage relevant files to git.
7. Commit: yarn commit. NOTE: Commits that don't follow the conventional format will be rejected. yarn commit creates this format for you, or you can put it together manually and then do a regular git commit.
8. Push: git push.
9. Open PR targeting the master branch.