Have ideas to improve npm?Join in the discussion! »

    react-mc-dnd

    1.0.8 • Public • Published

    react-mc-dnd

    An easy way to use react-dnd.

    List Demo

    Group Demo

    Paint Demo

    Installation

    Using npm:

    $ npm install --save react-mc-dnd
    

    Usage

    import React from 'react';
    import { DndProvider } from 'react-dnd';
    import HTML5Backend from 'react-dnd-html5-backend';
    
    import {
      ConfigContext,
      withContainer,
      withDrag,
      withDrop,
      withDragAndDrop,
      withDragAndHover,
      useContainer,
      useDrag,
      useDrop,
      useDragAndDrop,
      useDragAndHover,
    } from 'react-mc-dnd';
    
    const { Provider: ConfigProvider } = ConfigContext;
    
    const value = {
      dummy: false,
      isInChildren: (parentData, dragData, monitor) => false,
      onDrop: (dom, parentData, monitor) => {},
      onDragEnd: (dom, dargData, monitor) => {},
      onDragHover: (targetInfo, dargData, monitor) => {},
      onRender: (dom, data, monitor) => {},
    };
    
    /**
     * "container", "content" name what ever you like.
     */
    const Div = withDragAndDrop('div', 'container');
    const Input = withDragAndHover('input', 'content');
    
    const App = (props = {}) => {
      return (
        <DndProvider backend={HTML5Backend} context={window}>
          <ConfigProvider value={value}>
            {/* something to render */}
          </ConfigProvider>
        </DndProvider>
      );
    };
    
    export default App;

    ConfigContext

    Defined configuration to handle dnd events.

    dummy: bool

    If true, disable all dom events;

    isInChildren: func

    Return true means dargData is parentData descendant, not just children.

    withContainer/useContainer

    const data;
    
    withContainer('div', data);
    useContainer(ref, data);

    withDrop/useDrop

    Will trigger onDrop, onDragHover.

    const targetInfo = {
      parentData: {}, // object
      parentRelationKeys: [], // array
      data: {}, // object
      offset: [], // number, relative offset for data index
    };
    
    withDrop('div', targetInfo);
    useDrop(ref, targetInfo);

    withDragAndDrop/useDragAndDrop

    Will trigger onDrop, onDragEnd, onDragHover, onRender.

    const data;
    
    withDragAndDrop('div', data);
    useDragAndDrop(ref, data);

    withDragAndHover/useDragAndHover

    Will trigger onDrop, onDragEnd, onDragHover, onRender.

    const data;
    
    withDragAndHover('div', data);
    useDragAndHover(ref, data);

    Keywords

    none

    Install

    npm i react-mc-dnd

    DownloadsWeekly Downloads

    26

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar