tapita-pagebuilder-react

Tapita React PageBuilder Client

Install

npm install --save tapita-pagebuilder-react

Usage

import React, { Component } from 'react'

import { PageBuilderComponent } from 'tapita-pagebuilder-react'

class Example extends Component {
  render() {
    return <PageBuilderComponent endPoint={endPoint} maskedId={maskedId} />
  }
}

Develop

git clone https://github.com/TapitaCommerce/tapita-pagebuilder-react
cd tapita-pagebuilder-react
yarn install && cd example && yarn install && cd ..
yarn start

Then go to example directory, run another yarn start command.

Props

• endPoint - String
• maskedId - String
• toPreview - Boolean
• ProductList - ReactComponent - which would receive item data as props
• ProductGrid - ReactComponent - which would receive item data as props
• ProductScroll - ReactComponent - which would receive item data as props
• CategoryScroll - ReactComponent - which would receive item data as props
• Link - ReactComponent - For internal linking
• history - Object - For history push inside pagebuilder component
• formatMessage - Function - For Localization Purpose
• lazyloadPlaceHolder - ReactComponent - Place holder for lazyload Image, if false/ no lazyload applied
• overRender - Function - Function to override render function for each Item
• layoutFilter - Int - Add filter to render the item: UNKNOWN: -1, PAGE_COMPONENT: 0, TOP: 1, BOTTOM: 2
• filterRootChildrenOnly - Boolean - Only apply layoutFilter to highest level elements

usePbFinder

usePbFinder is a hook to help you find your page from the pages you created on Pagebuilder dashboard.

// storeCode is optional
const pbFinderProps = usePbFinder({
    endPoint,
    integrationToken,
    storeCode
});
const {
    loading,
    pageMaskedId,
    findPage,
    pathToFind,
    pageData,
    allPages
} = pbFinderProps;

with findPage(pathname) and use pageData and pageMaskedId to find your page with path_name

and findPage() to getData and check `allPages` to get page with your own condition.

License

MIT © Tapita