A React component that renders a file tree like interface.
npm install @stoplight/tree-list
- View the changelog: Releases
- Features
- Installation
- Usage
- TreeList Props
- TreeList Store
- TreeList Tree
- Contributing
- Component for rendering a tree in a tree like interface
- Drag and drop support
- Context menu support
- Themeable
Supported in modern browsers.
``bash`latest stable
yarn add @stoplight/tree-list @stoplight/ui-kit
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';
1. Clone repo.
2. Create / checkout feature/{name}, chore/{name}, or fix/{name} branch.yarn
3. Install deps: .yarn test.prod
4. Make your changes.
5. Run tests: .yarn commit
6. Stage relevant files to git.
7. Commit: . _NOTE: Commits that don't follow theyarn commit
conventional format will be
rejected. creates this format for you, or you can put it together manually and then do a regulargit commit
._git push
8. Push: .master` branch.
9. Open PR targeting the