@nine-slice-frame/react/dist/index.d.mts

Nine-slice scaling component for React using CSS border-image

import React from 'react';

interface NineSliceFrameProps {
    /** Path to the image (relative to public folder) */
    imagePath: string;
    /** Slice values - number for uniform, object for per-edge */
    slice?: number | {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    /** Visual border width in pixels */
    borderWidth?: number;
    /** Border repeat mode */
    repeat?: 'stretch' | 'repeat' | 'round' | 'space';
    /** Use 'fill' to show center of image as background */
    fill?: boolean;
    /** Use pixelated rendering for pixel art */
    pixelated?: boolean;
    /** Child content */
    children?: React.ReactNode;
    /** Additional CSS class names */
    className?: string;
    /** Additional inline styles */
    style?: React.CSSProperties;
}
/**
 * NineSliceFrame - A modern, CSS-based nine-slice scaling component
 *
 * Uses CSS border-image to achieve true nine-slice scaling without manual div positioning.
 * Much simpler and more performant than transform-based approaches.
 *
 * @example
 * ```tsx
 * <NineSliceFrame
 *   imagePath="/ui/frame.png"
 *   slice={8}
 *   borderWidth={5}
 * >
 *   Content goes here
 * </NineSliceFrame>
 * ```
 */
declare const NineSliceFrame: React.FC<NineSliceFrameProps>;

export { NineSliceFrame, type NineSliceFrameProps };