DND XBox

Required

• react
• react-eva-icons
• @reduxjs/toolkit

How to use

Add reducer in rootReducer.ts

import { xBoxSliceReducer } from "@xbuilder/dnd-xbox"

...

const rootReducer = combineReducers({
  ...
  xBox: xBoxSliceReducer
})

...

Or use replaceReducer

store.replaceReducer(newReducer)

Import styles.css in root file(_pages/_app or src/App)

import "@xbuilder/dnd-xbox/styles.css"

Add XBow and useDrop

const { dragged, dropped } = useDrop(["page-list"])

useEffect(() => {
    if (!dropped) return
    ...
}, [dropped])

...

<XBox
    groups={["page-list"]}
    metadata={{
        id,
        name,
        parent_id,
        dragged_type: "page-folder"
    }}
>
    ...
</XBow>

Instal in local project

$ yarn link

# in other local project
$ yarn link "@xbuilder/dnd-xbox"