Data driven drag-n-drop

A drag-n-drop component based on data from a list of objects.

npm i @igor-j86/drag-n-drop

Latest version: Loading...

Random 1
Random 2
Random 3

Example 4

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Example
import { DragNDrop } from "@igor-j86/drag-n-drop"
// Available CSS (optional)
import "@igor-j86/drag-n-drop/lib/style/ijdnd.css"

export const MyComponent = () => {
  // Example data
  const data = [
    {
      tileId: 'entry1',
      sortOrder: 1,
      name: "Entry 1 name",
      isAvailable: true,
      hasAccess: true,
      isDisplayed: true,
      columns: 2,
      children: <>Some element</>
    },
    ....
  ]

  return (
    <DragNDrop id="exampleTiles" resources={data}  />
  )
}