DOCSEARCHbyAlgolia
Submit Docs

React Bricks API Reference

website·Indexed 35 days ago

https://docs.reactbricks.com

Documentation for the React Bricks visual CMS, including components like PageViewer and Editor, hooks such as usePagePublic and useAuth, and utility functions for A/B testing, i18n middleware, and content fetching.

Tokens
50.9K
Snippets
179
Records
400
Agent score
64%

What's inside React Bricks

  1. Overview of the react-bricks API library

    The react-bricks library provides a comprehensive set of components, context, hooks, and utilities designed for developers who are creating their own custom architecture or need a deep understanding of how React Bricks components function internally.

  2. Overview of React Bricks Stories

    React Bricks stories are named sets of props that act as templates for bricks. Unlike embedding a page (which maintains a single source of truth), applying a story to a brick copies the saved props to that brick. Once applied, the brick can be modified independently without affecting the original story or other bricks using the same story.

  3. Overview of React Bricks Form Management

    React Bricks v5 allows users to create forms via the dashboard and configure backend actions that trigger upon submission. This decouples the form workflow (e.g., email notifications, webhooks) from the frontend code, allowing teams to manage common website forms without hard-coding every workflow.

  4. Overview of React Bricks Email Marketing

    React Bricks v5 allows teams to create email campaigns using the same visual editing model as website pages. Email marketing pages are defined by a specific page type and are connected to an Email Sending Provider via the dashboard to send or schedule campaigns.

  5. Overview of RichTextExt (Extensible RichText)

    The RichTextExt component is an extensible version of the standard RichText component. While RichText is simpler for basic needs, RichTextExt uses a plugin system that allows developers to replace or add any part of a rich-text feature, including render functions, button icons, labels, and shortcut keys. It is built on top of the Slate editor.

  6. Overview of React Bricks Universal CMS

    React Bricks is a universal headless CMS designed for Next.js and Astro. It combines the flexibility of a headless CMS with visual editing capabilities. Unlike traditional headless CMSs, React Bricks allows content editors to work directly on styled content (inline visual editing) while developers use pure React and TypeScript to build the content blocks, known as "bricks."

  7. Understand the role of Bricks in React Bricks

    A Brick is a visually editable content block created by developers using React. These blocks serve as a predefined 'Lego set' of components that content editors use to assemble pages. Developers define the editable areas using React Bricks visual components and can restrict or enable specific styling options (such as padding or background colors) via sidebar controls to maintain brand consistency.

  8. Render a page on the front-end using PageViewer

    The PageViewer component renders a page on the public front-end exactly as it appears in the Admin Interface, but with visual edit components (Text, RichText, Image, File, Repeater) set to read-only mode. Before passing a page object to PageViewer, it must be processed with the cleanPage utility function to validate incoming blocks against the bricks schema.

  9. Understand React Bricks Architecture

    React Bricks operates using two primary components:

    1. React Library: Used by developers to create visually editable content blocks ("bricks") using React and TypeScript. Each brick is assigned a unique name within the design system and includes a schema defining its properties.
    2. SaaS Backend: Stores content as a JSON representation. The backend is agnostic of the brick's visual appearance or code implementation; it simply stores an array of blocks for each page, where each block contains the brick name and the properties edited by the user.

    The React Bricks library acts as the bridge, matching the JSON data from the database with the corresponding React components in the code to render the final page in both the Admin interface and the frontend Page Viewer.

  10. Hosting requirements for React Bricks

    React Bricks websites can be hosted on any platform capable of running Node.js. This is required for building the website (Static Site Generation) or building pages at runtime (Server Side Rendering). Compatible platforms include Vercel, Netlify, AWS, and Azure.

  11. Access and components of the React Bricks Admin Interface

    In Starter projects, the Admin interface is located at the /admin path. It is composed of several core components: <Admin>, <Login>, <Editor>, <MediaLibrary>, <Playground>, and <AppSettings>. The interface provides four primary views: the Editor (for page creation and content editing), Media (Digital Assets Management), Playground (previewing Bricks and Page Types), and Settings/Deploy (for triggering rebuilds or managing app settings via the React Bricks Dashboard).

  12. Choose a content reuse method in React Bricks

    React Bricks provides three primary ways to reuse content depending on the desired behavior:

    • Stories: Use as a 'cookie cutter' to reuse a specific brick's configuration (props). Changes to the story do not affect bricks already created from it.
    • Embed: Use for 'change once, apply everywhere' blocks. Embedding a page creates a single source of truth; updating the original page updates all instances where it is embedded.
    • Dedicated PageViewers: Use for global layout fragments like headers and footers to optimize build performance and avoid excessive fetching.