# what-a-drag

> A Drag and drop tree library designed with customization and usability in mind

Latest version **3.8.0** (published 2020-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install what-a-drag
pnpm add what-a-drag
yarn add what-a-drag
bun add what-a-drag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.8.0 |
| Published | 2020-06-25 |
| First published | 2019-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 31.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kiran Gopalakrishnan |
| Maintainers | kiran1o1 |

## Links

- npm: https://www.npmjs.com/package/what-a-drag
- npm.io page: https://npm.io/package/what-a-drag

## Dependencies (3)

- [memoizee](https://npm.io/package/memoizee.md) *
- [react-window](https://npm.io/package/react-window.md) *
- [react-window-infinite-loader](https://npm.io/package/react-window-infinite-loader.md) *

## Recent versions

- 3.8.0 (latest) — 2020-06-25
- 1.1.3 (next) — 2019-08-12
- 3.7.1 — 2020-06-22
- 3.7.0 — 2020-06-22
- 3.6.0 — 2020-05-12
- 3.5.3 — 2020-04-20
- 3.5.2 — 2020-04-16
- 3.5.1 — 2020-04-16
- 3.5.0 — 2020-04-15
- 3.4.0 — 2020-04-14
- 3.3.0 — 2020-04-08
- 3.1.0 — 2020-04-01
- 3.0.0 — 2019-12-17
- 1.8.2 — 2019-10-28
- 1.8.1 — 2019-10-17
- … 24 more at https://npm.io/package/what-a-drag/versions

## README

# What-a-drag
   A React Drag and drop tree library designed with customization and usuability in mind
    with added support for rendering and drag and dropping large lists.
# Installation

`npm install what-a-drag@latest --save`

#Get started
######Tree data structure
Tree is defined by a normalized data structure, where rootId defines the id of the root node and items map contains all the nodes indexed by their id. Child relationship is defined in the children field of parent in form of list of id's.

######Data attribute:
 
 Any consumer data should be defined in the data attribute of item, e.g. title, color, selection etc.

######State handling: 
This data structure is the single source of truth. After any interaction the consumer's responsibility to execute the mutation on the tree, which will be passed down in props to refresh the rendered tree. A few utils functions (mutateTree, moveItemOnTree) are provided in order to help you make those changes easily and in a efficient way.

######Performance / Side-effects:
 We put some effort into optimizing rendering based on reference equality. We only re-render an Item if it's reference changed or moved on the tree.

######Events:
  onDragEnd function will be triggered at the end of re-ordering. it provides the necessary information as TreePosition to change the tree.
 ######Example
        type TreePosition = {
          parentId: ItemId,
          index: number,
        };
        
        onDragEnd = (source: TreePosition, destination: ?TreePosition) => {
          const { tree } = this.state;
        
          if (!destination) {
            return;
          }
          const newTree = moveItemOnTree(tree, source, destination);
          this.setState({
            tree: newTree,
          });
        };
        
        
  # Types & Tree Structure 
    export type ChildItem = string;
    
    export type ItemId = string;
    
    export interface TreeItemData {
        id: string;
        [key: string]: any;
    }
    
    export interface TreeItem {
        id: string;
        isExpanded: boolean;
        hasChildren: boolean;
        data: TreeItemData;
        children: ChildItem[];
    }
    
    export interface TreeData {
        rootId: string;
        items: { [key: string]: TreeItem };
    }
    
 

  ####renderitem
  
      renderItem = ({
        item,
        onCollapse,
        onExpand 
      }: RenderItemParams) => {
        return (
          <div
          >
            <div>{item.id}</div>
            <div>{item.data ? item.data.title : ''}</div>
          </div>
        );
      };

##Expand & Collapse
onExpand and onCollapse functions are triggered when there is a need to change the state of a parent. This is the right time to trigger requests to load the subtree or flip the isExpanded attribute to show the already loaded children nodes.

####Example

    onExpand = (itemId: ItemId) => {
      const { tree }: State = this.state;
      this.setState({
        tree: mutateTree(tree, itemId, { isExpanded: true }),
      });
    };
    
## renderPlaceholder 
  Allows the consumer to specify a placeholder item for when a dragged item is being hovered over an item in the tree

    renderPlaceholder({ item, isDraggingOver, isDragging }){
        return (
            <div>
                {isDraggingOver?'Dragging over':'Not dragging over'}
            </div>
        );
    }
    
## DraggableList
   The exported component from `what-a-drag` which needs to be rendered with the tree data .
   
  ###Example
    
        import { DraggableList } from 'what-a-drag'
        
        <Draggable
             tree={treeData}
             renderItem={renderItem}
             renderPlaceholder={placeholderToRender}
             onExpand={onExpand}
             onCollapse={onCollapse}
             onDragEnd={onDragEnd} 
             height={500}
             itemSize={50}
             width={'100%'}
         />

---
_Source: https://npm.io/package/what-a-drag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._