Package Installation Install React Apple Tree using your preferred package manager:
npm install @newtonschool/react-apple-tree
Peer Dependencies React Apple Tree requires the following peer dependencies to be installed in your project:
npm install react react-dom styled-components
Required Versions Make sure your project has these minimum versions:
react : ^18.3.1 or higherreact-dom : ^18.3.1 or higherstyled-components : ^6.1.13 or higher
React Apple Tree is built for React 18+. If you’re using an older version of React, you may encounter compatibility issues.
TypeScript Setup React Apple Tree includes built-in TypeScript declarations. No additional type packages are required.
The package exports types you can use in your TypeScript projects:
import ReactAppleTree , { ReactAppleTreeProps , TreeItem , NodeData , OnChangeFn , GetNodeKeyFn } from '@newtonschool/react-apple-tree' ;
Type Definitions The main types you’ll work with:
type TreeItem < T = {}> = T & { id ?: string | number ; title ?: React . ReactNode ; subtitle ?: React . ReactNode ; expanded ?: boolean ; children ?: Array < TreeItem < T >>; }; type OnChangeFn < T > = ( treeData : Array < TreeItem < T >>) => void ; type GetNodeKeyFn < T = {}> = ( data : { node : TreeItem < T >; treeIndex : number } ) => string | number ;
You can extend TreeItem<T> with your own custom properties by using the generic type parameter.
Verification Verify your installation by creating a simple test component:
import React , { useState } from 'react' ; import ReactAppleTree from '@newtonschool/react-apple-tree' ; function TestTree () { const [ treeData , setTreeData ] = useState ([ { title: 'Test Node' } ]); return ( < div style = { { height: 300 } } > < ReactAppleTree treeData = { treeData } onChange = { setTreeData } getNodeKey = { ({ node }) => node . title } /> </ div > ); } export default TestTree ;
If you see a single node labeled “Test Node” that you can interact with, your installation is successful!
Import Options React Apple Tree provides two import options:
Default Import (With DnD Context) The default export includes the react-dnd context provider:
import ReactAppleTree from '@newtonschool/react-apple-tree' ; // Use directly - DnD context is included < ReactAppleTree treeData = { data } onChange = { setData } getNodeKey = { getKey } />
This is the recommended approach for most use cases.
Named Import (Without DnD Context) If you need to provide your own DnD context (for example, when using multiple trees with drag-and-drop between them):
import { ReactAppleTreeWithoutDndContext } from '@newtonschool/react-apple-tree' ; import { DndProvider } from 'react-dnd' ; import { HTML5Backend } from 'react-dnd-html5-backend' ; function App () { return ( < DndProvider backend = { HTML5Backend } > < ReactAppleTreeWithoutDndContext treeData = { data } onChange = { setData } getNodeKey = { getKey } /> </ DndProvider > ); }
Only use ReactAppleTreeWithoutDndContext if you need custom DnD context management. Most applications should use the default import.
Bundle Size React Apple Tree is optimized for production use:
The package uses tree-shaking to minimize bundle size
react-window provides efficient virtualization
styled-components allows for dynamic styling without CSS-in-JS overhead
Next Steps Now that you have React Apple Tree installed, let’s build your first tree:
Quick Start Guide Follow our step-by-step guide to create your first interactive tree