react-grid-layout/dist/extras.d.ts

A draggable and resizable grid layout with responsive breakpoints, for React.

import * as React from 'react';
import { d as GridCellConfig } from './calculate-mgLpNJ5O.js';
import './types-Cxf4nHNr.js';

/**
 * GridBackground component
 *
 * Renders an SVG grid background that aligns with GridLayout cells.
 * Use this to visualize the grid structure behind your layout.
 */

interface GridBackgroundProps extends GridCellConfig {
    /**
     * Number of rows to display. If "auto", calculates based on height.
     * @default 10
     */
    rows?: number | "auto";
    /**
     * Height of the background in pixels. Used when rows="auto".
     */
    height?: number;
    /**
     * Color of the grid cell backgrounds.
     * @default "#e0e0e0"
     */
    color?: string;
    /**
     * Border radius of grid cells in pixels.
     * @default 4
     */
    borderRadius?: number;
    /**
     * Additional CSS class name.
     */
    className?: string;
    /**
     * Additional inline styles.
     */
    style?: React.CSSProperties;
}
/**
 * SVG grid background component.
 *
 * Renders a visual grid that aligns with GridLayout cells. Position this
 * behind your GridLayout using CSS positioning.
 *
 * @example
 * ```tsx
 * import { GridBackground } from 'react-grid-layout/extras';
 *
 * function MyGrid() {
 *   const { width, containerRef, mounted } = useContainerWidth();
 *
 *   return (
 *     <div ref={containerRef} style={{ position: 'relative' }}>
 *       {mounted && (
 *         <>
 *           <GridBackground
 *             width={width}
 *             cols={12}
 *             rowHeight={30}
 *             margin={[10, 10]}
 *             rows={10}
 *             color="#f0f0f0"
 *           />
 *           <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>
 *             {children}
 *           </GridLayout>
 *         </>
 *       )}
 *     </div>
 *   );
 * }
 * ```
 */
declare function GridBackground({ width, cols, rowHeight, margin, containerPadding, rows, height, color, borderRadius, className, style }: GridBackgroundProps): React.ReactElement;

export { GridBackground, type GridBackgroundProps };