Napping Peanut Monsters

    @codecks/dnd

    0.3.5 • Public • Published

    @codecks/dnd

    Installation

    npm install @codecks/dnd

    Why?

    Working with all kinds of dnd approaches for Codecks, it became clear that native html-based drag and drop is still a big pain.

    This library is inspired by react-beautiful-dnd but does things differently:

    • only offering primitives, (i.e. no built-in reordering, no good accessibility story yet, PRs very welcome!). Thus, it's relatively small (< 7kb gzipped)
    • only using Portals for dragged elements (to make a transition to virtualized lists more straight forward)

    The library is meant as a substitute for the html-based drag and drop functionality offered via a fairly minimal react-based api.

    Usage

    <Draggable>

    import {DragController, Draggable} from "@codecks/dnd"
    
    <DragController type="box" renderItem={({id}) => <Box id={id} />}>
      <div>
        {boxes.map((id) => (
          <Draggable key={id} type="box" id={id} itemData={{id, myProp: true}}>
            {({handlers, ref}) => <Box {...handlers} ref={ref} id={id} />}
          </Draggable>
        ))}
      </div>
    </DragController>

    renderItem is used for rendering the dragged item in a portal, so it's compatible with windowing-based lists.

    It's using the render props pattern for the child so it can replace the content with a placeholder while dragging.

    useDropZone

    const DropZone = ({width = 200}) => {
      const {isOver, dragItem, ref} = useDropZone({
        type: "box",
        onDragOver: ({item, position}) => console.log("drag"),
        onDrop: ({item, position}) => console.log("drop!"),
      });
    
      return <div ref={ref}>Drop Here!</div>;
    };

    onDragOver's position will be null when the dragItem leaves the drop zone.

    FAQ

    • My dragged item doesn't appear when dragging!?

      First, make sure that the DragController is setup correctly with the correct type. Also the renderItem should not be wrapped with the Draggable component.

    Todos:

    • add pointer-events: none to everything (i.e. body) while dragging (to avoid hover effects, etc)
    • drag file support?

    License

    Licensed under MIT

    Install

    npm i @codecks/dnd

    DownloadsWeekly Downloads

    17

    Version

    0.3.5

    License

    MIT

    Unpacked Size

    422 kB

    Total Files

    12

    Last publish

    Collaborators

    • danielberndt