Bigl-custom-creator NPM

bigl-custom-creator

Visual tool for constructing custom banner pages layout

npm.io

Installation

The package can be installed via NPM:

npm install bigl-custom-creator --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 biglCustomCreator from 'bigl-custom-creator';
import 'bigl-custom-creator/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 wich receives file and returns a promise with image url address

biglCustomCreator(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:

npm.io