The Densou Adtech Banner Builder.
This is a basic usage example.
``html
React usage
`js
import React, { Component } from 'react'
import BannerBuilder from '@densouadtech/bannerbuilder'export default class BannerBuilderPage extends Component {
bannerBuilder = null
getBanner = () => {
console.log(this.bannerBuilder.getBanner(true))
}
render = () => {
return (
onRef={ref => { this.bannerBuilder = ref }}
theme={{
colors: {
main: 'royablue',
grey: '#444',
danger: '#721c24'
},
font: 'Helvetica'
}}
editor={{
enableSpawner: true,
banner: {
backgroundColor: '#fff',
size: {
width: 1000,
height: 500
}
}
}}
/>
)
}
}
`Development & Distribution
type
make and read instructionConfiguring the Banner builder
At the root of the project is provided a
config.example.js.
This config more or less consitutes the default config of the builder.
If you want to configure the builder differently it's there it happens.####
themeAllows you to configure the colors of the builder.
`js
bannerBuilder.theme = {
"colors": {
"main": "#478dc9",
"grey": "#e9e9e9",
"danger": "#e74c3c"
}
}
`####
editorThe dimensions and enabled functionalities of the builder itself can be configured here.
`js
bannerBuilder.editor = {
"enableSpawner": false,
"enableCanvas": true,
"canvas": {
"size": { "width": 450, "height": 900 }
},
"banner": {
"size": { "width": 300, "height": 600 }
}
}
`####
templatesTemplates are the possible elements a banner can consist of.
Text, Button, Header etc.
The templates does not describe the initial elements in the banner builder.
`js
bannerBuilder.templates = [
{
"id": 2,
"name": "Header 01",
"properties": {
"fontScaling": true,
"removeAble": true
},
"size": { "width": 300, "height": 110 },
"position": { "x": 10, "y": 10 },
"initial": {
"text": "Replaced by var",
"style": {
"width": "100%",
"height": "100%",
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"color": "#333",
"fontWeight": 600,
"fontFamily": "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif"
}
},
"preview": {
"text": "Header",
"style": {
"fontSize": 40
},
"size": { "width": 140, "height": 55 }
}
},
{
"id": 3,
"name": "Text 01",
"properties": {
"fontScaling": false,
"removeAble": true
},
"size": { "width": 280, "height": 110 },
"position": { "x": 10, "y": 10 },
"initial": {
"text": "This will be replaced by a variable.",
"style": {
"width": "100%",
"height": "100%",
"display": "flex",
"justifyContent": "center",
"alignItems": "center",
"color": "#333",
"fontSize": 20,
"fontFamily": "'Lucida Console', Monaco, monospace"
}
},
"preview": {
"text": "Text",
"style": {
"fontSize": 25
},
"size": { "width": 65, "height": 55 }
}
}
]
`####
initialTo add initial elements to the builder you have to populate the
bannerBuilder.initial
with values pointing to which templates they should take after.
If you have injection variables this is also the place to define those.`js
bannerBuilder.initial = [
{
"templateId": 2,
"injectionVariable": "injectVar1",
"position": { "x": 0, "y": 3 },
"properties": {
"injectAble": true,
"removeAble": false
}
},
{
"templateId": 3,
"injectionVariable": "injectVar2",
"position": { "x": 20, "y": 230 },
"properties": {
"injectAble": true,
"removeAble": false
}
}
]
`####
fontsA list of fonts available with they name/key and the values that will be used for the final element.
`js
bannerBuilder.fonts = [
{
"name": "Arial",
"family": "Arial, Helvetica, sans-serif"
},
{
"name": "Calibri",
"family": "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif"
}
]
`####
imagesA list of images primarily used as selected background images.
`js
bannerBuilder.images = [
"https://s3.eu-central-1.amazonaws.com/densou.bannerbuilder/images/01.jpg",
"https://s3.eu-central-1.amazonaws.com/densou.bannerbuilder/images/02.jpg"
]
``