### Installing dnd-kit-sortable-tree with npm

Source: https://github.com/shaddix/dnd-kit-sortable-tree/blob/master/README.md

This command installs the `dnd-kit-sortable-tree` package along with its necessary peer dependencies (`@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`) using npm. These packages are required to use the sortable tree component in a React project.

```bash
npm install dnd-kit-sortable-tree @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
```

--------------------------------

### Default Pointer Sensor Options Configuration (JSON)

Source: https://github.com/shaddix/dnd-kit-sortable-tree/blob/master/README.md

This JSON snippet defines the default configuration for the `pointerSensorOptions` prop of the `<SortableTree>` component. It specifies that dragging an item will start only after the pointer has moved a distance of 3 pixels, preventing accidental drags.

```json
{
    "activationConstraint": {
      "distance": 3
    }
  }
```

--------------------------------

### Minimal Sortable Tree Implementation in JSX

Source: https://github.com/shaddix/dnd-kit-sortable-tree/blob/master/README.md

This snippet provides a minimal, self-contained example of a sortable tree. It uses `useState` to manage the tree's `items` and an inline `TreeItemComponent` defined with `React.forwardRef` and `SimpleTreeItemWrapper`. The `initialMinimalData` array defines the basic structure of the tree items with `id` and `children` properties.

```jsx
export const Minimal = () => {
  const [items, setItems] = useState(initialMinimalData);
  return (
    <SortableTree
      items={items}
      onItemsChanged={setItems}
      {
        /*
         * You need to pass the component rendering a single item via TreeItemComponent props.
         * This component will receive the data via `props.item`.
         * In this example we inline the component, but in reality you should extract it into a const.
         */ ...{}
      }
      TreeItemComponent={React.forwardRef((props, ref) => (
        <SimpleTreeItemWrapper {...props} ref={ref}>
          {/* HERE GOES THE ACTUAL CONTENT OF YOUR COMPONENT */}
          <div>{props.item.id}</div>
        </SimpleTreeItemWrapper>
      ))}
    />
  );
};
/*
 * Configure the tree data.
 */
const initialMinimalData = [
  { id: '1', children: [{ id: '4' }, { id: '5' }] },
  { id: '2' },
  { id: '3' },
];
```

--------------------------------

### Defining a TreeItemComponent with SimpleTreeItemWrapper

Source: https://github.com/shaddix/dnd-kit-sortable-tree/blob/master/README.md

This example shows how to define a `TreeItemComponent` using `React.forwardRef` and `SimpleTreeItemWrapper`. It's crucial to wrap the component in `forwardRef` and pass the `ref` to `SimpleTreeItemWrapper` to ensure proper drag-and-drop functionality and accessibility. The actual content of the tree item is rendered inside the wrapper.

```tsx
React.forwardRef((props, ref) => (
  <SimpleTreeItemWrapper {...props} ref={ref}>
    <div>{props.item.value}</div>
  </SimpleTreeItemWrapper>
));
```

--------------------------------

### Minimal Viable Sortable Tree Implementation in TSX

Source: https://github.com/shaddix/dnd-kit-sortable-tree/blob/master/README.md

This snippet presents a production-ready minimal example of a sortable tree using TypeScript. It separates the `TreeItemComponent` into a named constant (`MinimalTreeItemComponent`) and defines a type for tree item data (`MinimalTreeItemData`). The `initialViableMinimalData` includes `value` and `canHaveChildren` properties, demonstrating more complex data structures.

```tsx
export const MinimalViable = () => {
  const [items, setItems] = useState(initialViableMinimalData);
  return (
    <SortableTree
      items={items}
      onItemsChanged={setItems}
      TreeItemComponent={MinimalTreeItemComponent}
    />
  );
};
type MinimalTreeItemData = {
  value: string;
};
/*
 * Here's the component that will render a single row of your tree
 */
const MinimalTreeItemComponent = React.forwardRef<
  HTMLDivElement,
  TreeItemComponentProps<MinimalTreeItemData>
>((props, ref) => (
  /* you could also use FolderTreeItemWrapper if you want to show vertical lines.  */
  <SimpleTreeItemWrapper {...props} ref={ref}>
    <div>{props.item.value}</div>
  </SimpleTreeItemWrapper>
));

/*
 * Configure the tree data.
 */
const initialViableMinimalData: TreeItems<MinimalTreeItemData> = [
  {
    id: '1',
    value: 'Jane',
    children: [
      { id: '4', value: 'John' },
      { id: '5', value: 'Sally' }
    ]
  },
  { id: '2', value: 'Fred', children: [{ id: '6', value: 'Eugene' }] },
  { id: '3', value: 'Helen', canHaveChildren: false }
];
```

--------------------------------

### Basic SortableTree Component Usage in TSX

Source: https://github.com/shaddix/dnd-kit-sortable-tree/blob/master/README.md

This snippet demonstrates the fundamental structure of the `SortableTree` component. It requires an `items` array for tree data, an `onItemsChanged` callback for reordering events, and a `TreeItemComponent` to render individual tree nodes.

```tsx
<SortableTree
  items={/* array of your tree items */}
  onItemsChanged={/* callback when items are reordered */}
  TreeItemComponent={/* component that renders a single tree item */}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.