Skip to main content

​
Overview

React Apple Tree is an updated version of the popular react-sortable-tree library, modernized to support React 18+, updated dependencies, and improved TypeScript types. This guide will help you migrate your existing react-sortable-tree implementation to React Apple Tree.

​
Why Migrate?

The original react-sortable-tree library is no longer actively maintained. React Apple Tree provides:
  • React 18+ Support: Full compatibility with the latest React features
  • Updated Dependencies: Modern versions of react-dnd (v16) and react-window
  • TypeScript Improvements: Better type definitions and TypeScript support
  • Active Maintenance: Regular updates and bug fixes
  • Same Core API: Minimal breaking changes to ease migration

​
What’s Different

​
Updated Dependencies

React Apple Tree uses modern versions of its core dependencies:
  • react-dnd v16+ (previously used older versions)
  • react-window instead of react-virtualized for better performance
  • React 18.3+ and React DOM 18.3+ as peer dependencies
  • styled-components v6+ as a peer dependency

​
Features Not Yet Implemented

Some features from react-sortable-tree are marked as not yet implemented:
  • Custom Themes: The theme prop is not fully implemented
  • Custom Node Content Renderer: The nodeContentRenderer prop
  • Custom Placeholder Renderer: The placeholderRenderer prop
If your application relies on these features, you may need to wait for future releases or implement custom solutions using generateNodeProps and CSS styling.

​
API Changes

The rowHeight prop documentation references “react-sortable-tree” in the description but functions the same way in React Apple Tree.

​
Migration Steps

1

Update Package Dependencies

Remove the old react-sortable-tree package and install React Apple Tree:
# Using npm
npm uninstall react-sortable-tree
npm install @newtonschool/react-apple-tree

# Using yarn
yarn remove react-sortable-tree
yarn add @newtonschool/react-apple-tree
Ensure your project meets the peer dependency requirements:
  • React ^18.3.1
  • React DOM ^18.3.1
  • styled-components ^6.1.13
2

Update Import Statements

Replace all imports from react-sortable-tree with the new package name:Before:
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css';
After:
import ReactAppleTree from '@newtonschool/react-apple-tree';
// No CSS import needed - styles are included
React Apple Tree uses styled-components internally, so you don’t need to import a separate CSS file.
3

Update Component Usage

Rename the component in your JSX:Before:
<SortableTree
  treeData={treeData}
  onChange={setTreeData}
/>
After:
<ReactAppleTree
  treeData={treeData}
  onChange={setTreeData}
/>
4

Update Helper Function Imports

Helper functions are exported the same way:Before:
import {
  addNodeUnderParent,
  removeNodeAtPath,
  changeNodeAtPath,
} from 'react-sortable-tree';
After:
import {
  addNodeUnderParent,
  removeNodeAtPath,
  changeNodeAtPath,
} from '@newtonschool/react-apple-tree';
All helper functions remain available and work identically.
5

Handle Custom Themes (If Applicable)

If you were using the theme prop with a custom theme package:Temporary workaround: Use generateNodeProps to add custom styling and className props to achieve similar theming:
<ReactAppleTree
  treeData={treeData}
  onChange={setTreeData}
  generateNodeProps={({ node, path }) => ({
    className: 'custom-node',
    style: {
      // Your custom styles
    },
  })}
/>
Combine with custom CSS for full styling control.
6

Update DnD Context (If Using Custom Context)

If you were providing your own react-dnd context, use the named export:Before:
import SortableTreeWithoutDndContext from 'react-sortable-tree';
After:
import { ReactAppleTreeWithoutDndContext } from '@newtonschool/react-apple-tree';
7

Test Your Application

Thoroughly test all tree interactions:
  • Drag and drop functionality
  • Node expansion/collapse
  • Search functionality
  • Custom callbacks (onMoveNode, onVisibilityToggle, etc.)
  • Any custom styling or buttons added via generateNodeProps

​
Common Gotchas

​
Styled Components Peer Dependency

React Apple Tree requires styled-components as a peer dependency. If you’re not already using it in your project, you’ll need to install it: 
npm install styled-components

​
CSS Import No Longer Needed

Unlike react-sortable-tree, you don’t need to import a separate CSS file. Remove any imports like: 
// Remove this line
import 'react-sortable-tree/style.css';

​
TypeScript Types

React Apple Tree has improved TypeScript support. If you’re using TypeScript, you may need to update type imports: 
import { ReactAppleTreeProps } from '@newtonschool/react-apple-tree';

​
React Virtualized → React Window

Internally, React Apple Tree uses react-window instead of react-virtualized. The prop reactVirtualizedListProps still exists for compatibility, but you’re now passing props to the react-window List component.

​
Complete Migration Example

Here’s a full before/after comparison: Before (react-sortable-tree): 
import React, { useState } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css';

function MyTree() {
  const [treeData, setTreeData] = useState([
    { title: 'Parent', children: [{ title: 'Child' }] },
  ]);

  return (
    <div style={{ height: 400 }}>
      <SortableTree
        treeData={treeData}
        onChange={setTreeData}
        getNodeKey={({ node }) => node.id}
      />
    </div>
  );
}

export default MyTree;
After (React Apple Tree): 
import React, { useState } from 'react';
import ReactAppleTree from '@newtonschool/react-apple-tree';

function MyTree() {
  const [treeData, setTreeData] = useState([
    { title: 'Parent', children: [{ title: 'Child' }] },
  ]);

  return (
    <div style={{ height: 400 }}>
      <ReactAppleTree
        treeData={treeData}
        onChange={setTreeData}
        getNodeKey={({ node }) => node.id}
      />
    </div>
  );
}

export default MyTree;

​
Benefits of Migrating

Modern React Support

Full compatibility with React 18 features including concurrent rendering and automatic batching

Better Performance

Uses react-window for improved virtualization performance with large trees

Active Maintenance

Regular updates, bug fixes, and community support

TypeScript Ready

Enhanced type definitions for better development experience

​
Need Help?

If you encounter issues during migration:

​
Next Steps

API Reference

Explore all available props and configuration options

Helper Functions

Learn about data manipulation utilities

Examples

See practical implementation examples

Styling

Customize the appearance of your tree

Build docs developers (and LLMs) love

Get started for freeTalk to us