@lg-charts/drag-provider NPM

DragProvider

Provides drag and drop functionality for chart components.

DragProvider creates a draggable context around charts components. Any child Chart or ChartCard with a dragId prop, will automatically become draggable and droppable within that context.

DragProvider contexts are also nestable, providing better control of where a child component can be dropped.

npm (scoped)

Installation

PNPM

pnpm add @lg-charts/drag-provider

NPM

npm install @lg-charts/drag-provider

Yarn

yarn add @lg-charts/drag-provider

Basic Chart Example

function ChartPage() {
  // Chart state and dragEnd handlers configured here

  return (
    <DragProvider onDragEnd={handleChartCardDrag}>
      {/** Controls drag events for cards */}
      <ChartCard dragId="chart-card-1">
        <DragProvider onDragEnd={handleChartDrag}>
          {/** Controls drag events for charts inside chart-card-1 */}
          <Chart dragId="chart-1" />
          <Chart dragId="chart-2" />
        </DragProvider>
      </ChartCard>
      <ChartCard dragId="chart-card-2">
        <DragProvider onDragEnd={handleChartDrag}>
          {/** Controls drag events for charts inside chart-card-2 */}
          <Chart dragId="chart-3" />
          <Chart dragId="chart-4" />
        </DragProvider>
      </ChartCard>
    </DragProvider>
  }
}

Props

Name	Description	Type	Default
`onDragStart` (optional)	Callback that will fire on the `dragstart` event	`({ active: string }) => void`	`undefined`
`onDragEnd` (optional)	Callback that will fire on the `dragend` event	`({ active: string; over: string }) => void`	`undefined`