@stoplight/tree-list

A React component that renders a file tree like interface.

Usage no npm install needed!

<script type="module">
  import stoplightTreeList from 'https://cdn.skypack.dev/@stoplight/tree-list';
</script>

README

@stoplight/tree-list

@stoplight/tree-list

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.