Package Exports

react-layouts-builder
react-layouts-builder/packages/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-layouts-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

REACT LAYOUTS BUILDER

This project use TailwindCSS.

Installation

npm install react-layouts-builder

// or

yarn add react-layouts-builder

React Layouts dnd interface



// Interface of the Layout container
ILayoutContainer {

    // data use for the layouts components
    // data must have a unique identifier like id or ...
    data: any[];

    // the unique identifer of the data
    stableDataKey: string;

    // component used to render the layouts items
    renderComponent: (data: any) => ReactNode | JSX.Element;

    // handler attached to the layouts
    // this fired when layouts change
    // It is used to save the current layouts in your server or localstorage or ...
    onLayoutChange: (data: ILayoutSection[]) => void;

    // the actual layouts make sure to update  each time onLayoutChange fired
    layouts?: ILayoutSection[];

}

// Interface of the Layout sections
ILayoutSection {
    id: any;
    order: number;
    columns: ILayoutColumn[];
    className: string;
}

// Interface of the Layout columns
ILayoutColumn {
    id: any;
    order: number;
    childIds: (string | number)[];
    className?: string;
    styles?: CSSProperties;
    width: number;
}

LayoutContainer Props

The LayoutContainer is used to create the layouts using a drop and drop interface. It accepts the following props.

Property	Type	Required	Description
layouts	ILayoutSection[]	false	Represents the current layout
onLayoutChange	`(layouts:ILayoutSection[] ) => void`	false	layouts handler