layout-constructor

Visual tool for constructing custom banner pages layout

Installation

The package can be installed via NPM:

npm install layout-constructor --save

Dependencies

You’ll need to install some dependencies separately since they aren’t included in the package:

• react
• react-dom
• prop-types
• classnames
• rx
• tanok

Example

Here's simple usage example:

import LayoutConstructor from 'layout-constructor';
import 'layout-constructor/dist/index.min.css';

const node = document.getElementById('app');
const presetTemplates = [
    [
        { column: 1, row: 1 },
        { column: 2, row: 1 },
        { column: [3, 4], row: 1 },
    ],
    [
        { column: [1, 2], row: 1 },
        { column: [3, 4], row: 1 },
    ],
    [
        { column: [1, 2, 3, 4], row: 1 }
    ],
];
const importJSON = null; // or an exported JSON you want to load
const onExportJSON = null; // or a callback which will receive data in JSON format
const onUploadImage = null; // or a callback which receives file and returns a promise with image url address

LayoutConstructor(node, { presetTemplates, importJSON, onExportJSON, onUploadImage });

Note that you need to require css file from this package. This example will work if your build system supports requiring css files (webpack is one that does).

presetTemplates is an array of block structures that will be available for building your layout. In this example your presets will look like this:

Demo

You can try it out on the Demo page