@marciocamello/react-sortable-tree/stories/themes.js

Drag-and-drop sortable component for nested data and hierarchies

import React, { Component } from 'react'
import SortableTree from '../src'
// In your own app, you would need to use import styles once in the app
// import 'react-sortable-tree/styles.css';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      treeData: [
        {
          title: 'The file explorer theme',
          expanded: true,
          children: [
            {
              title: 'Imported from @nosferatu500/theme-file-explorer',
              expanded: true,
              children: [
                {
                  title: (
                    <div>
                      Find it on{' '}
                      <a href="https://www.npmjs.com/package/@nosferatu500/theme-file-explorer">
                        npm
                      </a>
                    </div>
                  ),
                },
              ],
            },
          ],
        },
        { title: 'More compact than the default' },
        {
          title: (
            <div>
              Simply set it to the <code>theme</code> prop and you&rsquo;re
              done!
            </div>
          ),
        },
      ],
    }
  }

  render() {
    return (
      <div style={{ height: 300 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={(treeData) => this.setState({ treeData })}
        />
      </div>
    )
  }
}