Page Builder Widget

PageBuilder renders a composed page from TaskOn page-builder config.

It can automatically render Quest, Community Task, Leaderboard, and User Center widgets in one layout.

Import


import { PageBuilder } from "@taskon/widget-react/page-builder";

Usage

Load by Page ID


<PageBuilder pageId={1001} />

Local Config


import type { PageBuilderConfig } from "@taskon/core";
 
const config: PageBuilderConfig = {
  version: 1,
  sections: [],
};
 
<PageBuilder config={config} />

Props

Prop	Type	Description
`pageId`	`number`	Load page config from TaskOn API
`config`	`PageBuilderConfig`	Render from local config (skip API request)
`className`	`string`	Custom root class
`style`	`React.CSSProperties`	Custom root style

At least one of pageId or config should be provided.

Example

ComposedPage.tsx


import { TaskOnProvider } from "@taskon/widget-react/core";
import { PageBuilder } from "@taskon/widget-react/page-builder";
 
function ComposedPage() {
  return (
    <TaskOnProvider config={{ clientId: "YOUR_CLIENT_ID" }}>
      <PageBuilder pageId={1001} />
    </TaskOnProvider>
  );
}