@siteone/pagebuilder-core
v0.9.0
Published
State management and stuff
Downloads
210
Keywords
Readme
@siteone/pagebuilder-core
TODO: State management and stuff
Usage
const pagebuilderCore = require('@siteone/pagebuilder-core');
// TODO: DEMONSTRATE API
API
BlockMeta
Pro jednoduché testování se přidávají základní informace o bloku do DOM jako data-
attributy k bloku
předáváme data-blockname
a data-blockid
, v konkrétních blocích je pak potřeba myslet na to, aby se tyto props předali do nejvyšší úrovně bloku
BlockMetaContext
Každý block, který je vyrenderovaný pagebuilderem, předává do BlockMetaContextu informace o daném bloku, které jsou primárně určeny pro analytiku, ale může být použita na více věcí
Context obsahuje data v tomto formátu
type BlockMetaType = {
/**
* @description name of block
*/
name: string,
/**
* @description unique identification of block on page
*/
id: string,
/**
* @description says on what breakpoints is component visible
*/
displayOn: string,
/**
* @description what theme is used for this block
*/
theme: string,
}
Použití
import React, { useContext } from 'react'
import { BlockMetaContext } from '@siteone/pagebuilder-core'
function ButtonContainer () {
const blockMeta = useContext(BlockMetaContext)
const dispatch = useDispatch()
const handleClick = () => {
dispatch({
type: '@@analytics/BUTTON_CLICK',
payload: {
action: 'click',
block: blockMeta.name,
theme: blockMeta.theme,
// some other stuff
},
})
function() { console.log('do some other magic') }
}
return <button onClick={handleClick}>awesome button</button>
}