Tapita-pagebuilder-react NPM

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.