@stoplight/tree-list


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

$3

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

$3

Supported in modern browsers.

``bash


latest stable


yarn add @stoplight/tree-list @stoplight/ui-kit
`

$3

This is a bare minimum required to have anything rendered.

`jsx
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());

;
`

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

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

$3

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.