react-drag-panel/dist/index.d.mts

Drag & drop panel grid layout for React

import React, { JSX } from 'react';

interface Panel {
    id?: string;
    x?: number;
    y?: number;
    w?: number;
    h?: number;
    content?: string;
}

interface PanelGridProps {
    /**
     * 렌더링할 패널 배열
     * 각 패널은 위치(x, y), 크기(w, h), 고유 id 등을 포함함
     */
    panels?: Panel[];
    /**
     * 한 줄에 배치할 컬럼 수
     * 기본값은 12
     */
    cols?: number;
    /**
     * 한 grid row 당 높이 (px 단위)
     * 패널 높이 계산에 사용됨
     */
    rowHeight?: number;
    /**
     * 전체 grid 컨테이너의 너비 (px 단위)
     */
    width?: number;
    /**
     * 각 패널 사이의 간격: [수평(px), 수직(px)]
     * 기본값은 [0, 0]
     */
    margin?: [number, number];
    /**
     * grid 컨테이너의 안쪽 여백: [좌우(px), 상하(px)]
     * 기본값은 [0, 0]
     */
    padding?: [number, number];
    /**
     * 드래그 앤 드롭 기능 활성화 여부
     * 기본값은 true
     */
    isDraggable?: boolean;
    /**
     * 드래그 앤 드롭 시 패널 간 충돌 방지 여부
     * 기본값은 true
     */
    preventCollision?: boolean;
    /**
     * 패널 위치가 변경될 때 호출되는 콜백 함수
     */
    onLayoutChange?: (layout: Panel[]) => void;
    /**
     * 각 패널에 대응되는 자식 React 요소들
     */
    children?: React.ReactNode;
}
/**
 * PanelGrid는 주어진 패널 데이터를 기반으로 고정된 컬럼 수와 행 높이에 따라
 * 격자 형태로 자식 컴포넌트를 배치하고, 드래그 앤 드롭을 통해 순서를 재배치할 수 있는 컴포넌트입니다.
 */
declare const PanelGrid: ({ panels, cols, rowHeight, width, margin, padding, isDraggable, preventCollision, onLayoutChange, children, }: PanelGridProps) => JSX.Element;

export { PanelGrid };