React Bricks

https://docs.reactbricks.com/
Admin
React Bricks is a visual headless CMS for React, providing tools and features for content...
Tokens:137,586
Snippets:1,429
Trust Score:9.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Initialize React Bricks project with npm

Source: https://docs.reactbricks.com/llms-small.txt

Use this command to start the React Bricks installation wizard using npm.

```shell
# create a new project with npm
npm create reactbricks-app@latest
```

--------------------------------

### Initialize React Bricks project with yarn

Source: https://docs.reactbricks.com/llms-small.txt

Use this command to start the React Bricks installation wizard using yarn.

```shell
# create a new project with yarn
yarn create reactbricks-app
```

--------------------------------

### Create a new project with npm

Source: https://docs.reactbricks.com/getting-started

Run this command in your terminal to start the React Bricks install wizard using npm.

```bash
# create a new project with npm
npm create reactbricks-app@latest
```

--------------------------------

### Create a new project with yarn

Source: https://docs.reactbricks.com/getting-started

Run this command in your terminal to start the React Bricks install wizard using yarn.

```bash
# create a new project with yarn
yarn create reactbricks-app
```

--------------------------------

### Create a new project with pnpm

Source: https://docs.reactbricks.com/getting-started

Run this command in your terminal to start the React Bricks install wizard using pnpm.

```bash
# create a new project with pnpm
pnpm create reactbricks-app@latest
```

--------------------------------

### fetchTags Usage Example

Source: https://docs.reactbricks.com/api-reference/utilities/fetch-tags

An example demonstrating how to import and call fetchTags using an API key from a configuration file.

```javascript
import { fetchTags } from 'react-bricks/frontend'
import config from '../react-bricks/config'


const paginatedTags = await fetchTags(config.apiKey)
```

--------------------------------

### Usage example for AppSettings

Source: https://docs.reactbricks.com/api-reference/components/app-settings

This example demonstrates how to wrap the AppSettings component with the Admin component to render the settings page.

```jsx
import React from 'react'
import { Admin, AppSettings } from 'react-bricks'


const AppSettingsPage = () => {
  return (
    <Admin>
      <AppSettings />
    </Admin>
  )
}


export default AppSettingsPage
```

--------------------------------

### Usage example with fetchPage

Source: https://docs.reactbricks.com/api-reference/components/page-viewer

Example showing how to fetch page data manually using fetchPage and render it with PageViewer.

```javascript
import React, { useState, useContext, useEffect } from 'react'
import {
  PageViewer,
  fetchPage,
  cleanPage,
  ReactBricksContext,
} from 'react-bricks/frontend'


const ViewerFetch = () => {
  const [page, setPage] = useState(null)
  const { apiKey, blockTypeSchema, pageTypeSchema } =
    useContext(ReactBricksContext)


  useEffect(() => {
    fetchPage('home', apiKey).then((data) => {
      const myPage = cleanPage(data, pageTypeSchema, blockTypeSchema)
      setPage(myPage)
    })
  }, [apiKey, pageTypeSchema, blockTypeSchema])


  if (page) {
    return <PageViewer page={page} />
  }
  return null
}


export default ViewerFetch
```

--------------------------------

### cleanPage Usage Example

Source: https://docs.reactbricks.com/api-reference/utilities/clean-page

Example showing how to use cleanPage after fetching page data.

```javascript
fetchPage('about-us', 'API_KEY').then((data) => {
  const myPage = cleanPage(data, pageTypes, bricks)
  console.log(myPage.content)
})
```

--------------------------------

### Usage example with usePage hook

Source: https://docs.reactbricks.com/api-reference/components/page-viewer

Example showing how to use the PageViewer component in conjunction with the usePage hook and cleanPage utility.

```javascript
import React, { useContext } from 'react'
import {
  PageViewer,
  usePage,
  cleanPage,
  ReactBricksContext,
} from 'react-bricks/frontend'


const Viewer = () => {
  const { data } = usePage('home')
  const { pageTypes, bricks } = useContext(ReactBricksContext)


  // Clean the received content
  // Removes unknown or not allowed bricks
  const page = cleanPage(data, pageTypes, bricks)


  return <PageViewer page={page} />
}


export default Viewer
```

--------------------------------

### Permissions Usage Example

Source: https://docs.reactbricks.com/common-tasks/custom-permissions

An example of configuring the ReactBricks component with custom permission logic to restrict page creation and translation deletion based on user roles.

```jsx
<ReactBricks
  ...
  permissions={{
    canAddPage: (user, pageType) => {
      if (
        pageType === 'institutional' ||
        user.customRole.id === 'blog_editor' && pageType !== 'blog') {
        return false
      }
      return true
    },
    canDeleteTranslation: (user, page) => {
      if (user.customRole.id === 'translator_fr' && page.language !== 'fr') {
        return false
      }
      return true
    }
  }}
>
  ...
</ReactBricks>
```

--------------------------------

### Usage example of the Playground component

Source: https://docs.reactbricks.com/api-reference/components/playground

Shows how to implement the Playground component by wrapping it within the Admin component.

```javascript
import React from 'react'
import { Admin, Playground } from 'react-bricks'


const PlaygroundPage = () => {
  return (
    <Admin>
      <Playground />
    </Admin>
  )
}


export default PlaygroundPage
```

--------------------------------

### Login Component Usage Example

Source: https://docs.reactbricks.com/api-reference/components/login

Shows how to wrap the Login component with the Admin component to render the login page.

```jsx
import React from 'react'
import { Admin, Login } from 'react-bricks'


const LoginPage = () => {
  return (
    <Admin isLogin>
      <Login />
    </Admin>
  )
}


export default LoginPage
```

--------------------------------

### useAdminContext example usage

Source: https://docs.reactbricks.com/llms-small.txt

Accessing isAdmin and previewMode values from the hook.

```ts
const { isAdmin, previewMode } = useAdminContext()
```

--------------------------------

### useAuth example usage

Source: https://docs.reactbricks.com/llms-small.txt

Retrieving login and logout functions from the useAuth hook.

```jsx
const { loginUser, logoutUser } = useAuth()
```

--------------------------------

### Create a bold plugin using markPluginConstructor

Source: https://docs.reactbricks.com/api-reference/utilities/mark-plugin-constructor

An example implementation of a bold text plugin using the markPluginConstructor helper.

```typescript
import React from 'react'
import { FaBold } from 'react-icons/fa'
import { markPluginConstructor } from 'react-bricks/frontend'


const plugin = markPluginConstructor({
  name: 'bold',
  hotKey: 'mod+b',
  render: (props: any) => <strong>{props.children}</strong>,
  icon: <FaBold />,
})


export default plugin
```

--------------------------------

### Usage example in Next.js App route

Source: https://docs.reactbricks.com/llms-small.txt

Example of retrieving the cookie store and passing the variant name to fetchPage within a Next.js App route.

```tsx
import { cookies } from 'next/headers'
import { fetchPage, getAbTestingCookie } from 'react-bricks/rsc'

const cookieStore = await cookies()
const variantName = getAbTestingCookie({
  slug: cleanSlug,
  locale,
  cookieStore,
})

const page = await fetchPage({
  slug: cleanSlug,
  language: locale,
  variantName,
  config,
})
```

--------------------------------

### Text component usage example

Source: https://docs.reactbricks.com/api-reference/visual-components/text

Example of implementing a Text component within a React Brick, including the required propName, value, and a custom renderBlock.

```typescript
// from 'react-bricks/rsc' for usage with server components
import { types, Text } from 'react-bricks/frontend'


interface MyBrickProps {
  title: types.TextValue
}


const MyBrick: types.Brick<MyBrickProps> = ({ title }) => (
  ...
  <Text
    propName="title"
    value={title}
    renderBlock={({ children }) => (
      <h1 className="text-xl font-extrabold">{children}</h1>
    )}
    placeholder="Title..."
  />
  ...
)


MyBrick.schema = { ... }


export default MyBrick
```

--------------------------------

### logoutUser example usage

Source: https://docs.reactbricks.com/api-reference/hooks/use-auth

Demonstrates how to trigger the logoutUser function via a button click.

```javascript
const { logoutUser } = useAuth()
return <button onClick={() => logoutUser()}>Logout</button>
```

--------------------------------

### Example usage of useReactBricksContext

Source: https://docs.reactbricks.com/api-reference/hooks/use-react-bricks-context

Access the bricks configuration object within a component.

```javascript
const { bricks } = useReactBricksContext()
```

--------------------------------

### Create an h1 plugin using blockPluginConstructor

Source: https://docs.reactbricks.com/llms-small.txt

Example implementation of an h1 plugin using the blockPluginConstructor helper.

```tsx
import React from 'react'
import { MdLooksOne } from 'react-icons/md'

import { blockPluginConstructor } from 'react-bricks/frontend'

const plugin = blockPluginConstructor({
  name: 'h1',
  hotKey: 'mod+shift+1',
  render: (props: any) => <h1>{props.children}</h1>,
  icon: <MdLooksOne />,
})

export default plugin
```

--------------------------------

### fetchTags usage example

Source: https://docs.reactbricks.com/llms-small.txt

Basic usage of fetchTags to retrieve tags using an API key from a configuration file.

```ts
import { fetchTags } from 'react-bricks/frontend'
import config from '../react-bricks/config'

const paginatedTags = await fetchTags(config.apiKey)
```

--------------------------------

### Icon preProcessor Example

Source: https://docs.reactbricks.com/llms-small.txt

Shows how to use the preProcessor prop to manipulate the SVG code, such as replacing fill attributes with currentColor.

```ts
preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
```

--------------------------------

### File component usage

Source: https://docs.reactbricks.com/api-reference/visual-components/file

Example of implementing the File component with allowed PDF extensions and a custom render function.

```jsx
import { File } from 'react-bricks/frontend'
...


<File
  propName="catalog"
  allowedExtensions={['.pdf']}
  renderBlock={({ name, url, size }) => (
    <a href={url}>
      {name}, {size / 1024} KB
    </a>
  )}
/>
```

--------------------------------

### Example usage of astroInteractivity

Source: https://docs.reactbricks.com/bricks/schema/astro-interactivity

An example of applying the 'load' interactivity directive to a Carousel brick schema.

```javascript
...
Carousel.schema = {
  ...
  astroInteractivity: 'load'
}
```

--------------------------------

### Preprocessor Example

Source: https://docs.reactbricks.com/api-reference/visual-components/icon

An example of using the preProcessor prop to modify SVG content, such as replacing fill attributes with currentColor.

```javascript
preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
```

--------------------------------

### Implement interactive client components

Source: https://docs.reactbricks.com/llms-small.txt

Create a server wrapper and a client component to handle interactive bricks in a Server Components starter.

```tsx
import { types, wrapClientComponent } from 'react-bricks/rsc'
import { RegisterComponent } from 'react-bricks/rsc/client'

import MapClient, { MapProps } from './MapClient'

const MAPTILER_ACCESS_TOKEN = '' // Insert access token

const schema: types.IBlockType<MapProps> = {
  name: 'map',
  label: 'Map',
  category: 'contact',
  tags: ['contacts', 'map'],
  playgroundLinkLabel: 'View source code on Github',
  playgroundLinkUrl:
    'https://github.com/ReactBricks/react-bricks-ui/blob/master/src/website/Map/Map.tsx',
  previewImageUrl: `/bricks-preview-images/map.png`,
  getDefaultProps: () => ({
    lat: '45.6782509',
    lng: '9.5669407',
    zoom: '6',
  }),
  sideEditProps: [
    {
      name: 'zoom',
      label: 'Zoom',
      type: types.SideEditPropType.Number,
    },
    {
      name: 'lat',
      label: 'Latitude',
      type: types.SideEditPropType.Number,
    },
    {
      name: 'lng',
      label: 'Longitude',
      type: types.SideEditPropType.Number,
    },
    {
      name: 'maptiler',
      label: 'MapTiler',
      type: types.SideEditPropType.Custom,
      show: () => !MAPTILER_ACCESS_TOKEN,
      component: () => {
        if (!MAPTILER_ACCESS_TOKEN) {
          return (
            <p className="text-sm">
              For better maps, please create a MapTiler free account and set the{' '}
              <code className="text-xs">MAPTILER_ACCESS_TOKEN</code> string.
            </p>
          )
        }
        return null
      },
    },
  ],
}

export default wrapClientComponent({
  ClientComponent: MapClient,
  RegisterComponent,
  schema,
})
```

```tsx
'use client'

import { Map, Marker } from 'pigeon-maps'
import { maptiler } from 'pigeon-maps/providers'
import React from 'react'

export interface MapProps {
  zoom: string
  lat: string
  lng: string
  mapTilerAccessToken: string
}

export const MapClient: React.FC<MapProps> = ({
  lat = '45.6782509',
  lng = '9.5669407',
  zoom = '10',
  mapTilerAccessToken,
}) => {
  const mapTilerProvider = React.useCallback(
    (x: number, y: number, z: number, dpr?: number | undefined) =>
      maptiler(mapTilerAccessToken, 'streets')(x, y, z, dpr),
    [mapTilerAccessToken]
  )

  let mapTilerProviderProp = {}

  if (mapTilerAccessToken) {
    mapTilerProviderProp = {
      provider: mapTilerProvider,
    }
  }

  return (
    <Map
      center={[parseFloat(lat), parseFloat(lng)]}
      height={350}
      metaWheelZoom
      zoom={parseInt(zoom, 10)}
      {...mapTilerProviderProp}
      dprs={[1, 2]}
      metaWheelZoomWarning="Use ctrl + wheel to zoom!"
      attribution={false}
    >
      <Marker anchor={[parseFloat(lat), parseFloat(lng)]} />
    </Map>
  )
}

export default MapClient
```

--------------------------------

### Usage Example for Icon Component

Source: https://docs.reactbricks.com/api-reference/visual-components/icon

Demonstrates importing the Icon component and rendering it with various props including dimensions, styling, and accessibility attributes.

```jsx
// Import from 'react-bricks/rsc/client' for Server components
import { Icon } from 'react-bricks/frontend'
...


<Icon
  icon={icon}
  width={32}
  height={32}
  className="text-pink-500 hover:text-pink-700"
  title="My Icon"
  description="Description for my Icon"
  fillOpacity={0.5}
/>
```

--------------------------------

### Usage Example for List Component

Source: https://docs.reactbricks.com/page-types

Demonstrates how to use the List component to fetch and render a list of pages with specific filters and sorting.

```jsx
<List
  of="blogPost"
  where={{
    language: 'fr',
    tag: 'cms',
    filterBy: { myCustomField: 'foo' },
  }}
  sort="-publishedAt"
  page={1}
  pageSize={20}
>
  {({ items, pagination }) => {
    return (
      <>
        {items.map((post) => {
          return (
            <PostListItem
              key={post.id}
              title={post.meta.title || ''}
              href={post.slug}
              content={post.meta.description || ''}
              author={post.author}
              date={post.publishedAt || ''}
              featuredImg={post.meta.image}
            />
          )
        })}
      </>
    )
  }}
</List>
```

--------------------------------

### useTagsPublic Usage Example

Source: https://docs.reactbricks.com/llms-small.txt

An example of using useTagsPublic within a React component to map and display tags retrieved from the API.

```tsx
import React from 'react'
import { useTagsPublic } from 'react-bricks/frontend'

const MyBrick: types.Brick = () => {
  const { data } = useTagsPublic()

  return (
    <div>
      {data?.items?.map((t) => (
        <span key={t} className="p-2 bg-gray-100 rounded mr-2">
          {t}
        </span>
      ))}
    </div>
  )
}

MyBrick.schema = {
  name: 'my-brick',
  ...
}

export default MyBrick
```

--------------------------------

### useTagsPublic Usage Example

Source: https://docs.reactbricks.com/api-reference/hooks/use-tags-public

An example of implementing the useTagsPublic hook within a React Brick component to display a list of tags.

```typescript
import React from 'react'
import { useTagsPublic } from 'react-bricks/frontend'


const MyBrick: types.Brick = () => {
  const { data } = useTagsPublic()


  return (
    <div>
      {data?.items?.map((t) => (
        <span key={t} className="p-2 bg-gray-100 rounded mr-2">
          {t}
        </span>
      ))}
    </div>
  )
}


MyBrick.schema = {
  name: 'my-brick',
  ...
}


export default MyBrick
```

--------------------------------

### register

Source: https://docs.reactbricks.com/rsc

Initializes the React Bricks configuration for RSC rendering.

```APIDOC
## register(config)

### Description
Initializes the React Bricks configuration. This must be invoked before using any component or function imported from react-bricks/rsc.

### Parameters
- **config** (types.ReactBricksConfig) - Required - The configuration object for React Bricks.

### Signature
`register(config: types.ReactBricksConfig): void`
```

--------------------------------

### Usage Example: Login Page

Source: https://docs.reactbricks.com/llms-small.txt

Demonstrates using the Admin component with the isLogin prop set to true to manage the authentication page.

```tsx
import React from 'react'
import { Admin, Login } from 'react-bricks'

const LoginPage = () => {
  return (
    <Admin isLogin>
      <Login />
    </Admin>
  )
}

export default LoginPage
```

--------------------------------

### sendFormSubmission Usage Example

Source: https://docs.reactbricks.com/api-reference/utilities/send-form-submission

Example of calling sendFormSubmission within a form brick submit handler to manage success and error states.

```javascript
try {
  const result = await sendFormSubmission({
    appId: rbContext.appId,
    appEnv: rbContext.environment,
    token,
    formId,
    emailAddress: email,
    data,
    fetchOptions: { apiPrefix: rbContext.apiPrefix },
  })


  if (result.success) {
    // Show a success state.
  } else {
    // Show result.message or a fallback error.
  }
} catch (err) {
  // Handle network or unexpected errors.
}
```

--------------------------------

### getAbTestingCookie Usage Example

Source: https://docs.reactbricks.com/api-reference/utilities/get-ab-testing-cookie

Example of using getAbTestingCookie within a Next.js App route to retrieve the variant name and pass it to fetchPage.

```typescript
import { cookies } from 'next/headers'
import { fetchPage, getAbTestingCookie } from 'react-bricks/rsc'


const cookieStore = await cookies()
const variantName = getAbTestingCookie({
  slug: cleanSlug,
  locale,
  cookieStore,
})


const page = await fetchPage({
  slug: cleanSlug,
  language: locale,
  variantName,
  config,
})
```

--------------------------------

### getBricks

Source: https://docs.reactbricks.com/llms-small.txt

Retrieves all configured bricks.

```APIDOC
## getBricks

### Description
Function to get all the configuration's bricks in a server component.

### Signature
`getBricks(): types.Bricks`
```

--------------------------------

### usePagesPublic usage example

Source: https://docs.reactbricks.com/api-reference/hooks/use-pages-public

Example of using the usePagesPublic hook within a React component to fetch and display a paginated list of products.

```javascript
import { usePagesPublic } from 'react-bricks/frontend'


export function ProductGrid() {
  const { data, error, isFetching } = usePagesPublic({
    type: 'product',
    filterBy: {
      category: 'shoes',
      featured: 'true',
    },
    sort: '-publishedAt',
    usePagination: true,
    page: 1,
    pageSize: 12,
  })


  if (isFetching) {
    return <p>Loading...</p>
  }


  if (error || !data) {
    return <p>Unable to load products.</p>
  }


  const products = 'items' in data ? data.items : data


  return (
    <div>
      {products.map((product) => (
        <article key={product.id}>{product.name}</article>
      ))}
    </div>
  )
}
```

--------------------------------

### usePageValues usage example

Source: https://docs.reactbricks.com/llms-small.txt

Example showing how to access page metadata and custom values within a React Bricks brick using the usePageValues hook.

```tsx
// The returned array contains the Page values and a setter function
const [page, setPage] = usePageValues()

return (
  <div>
    {/* Access the page creation date */}
    <p>Created at {moment(page.createdAt).format('MM/DD/YYYY')}.</p>

    {/* Access the page title */}
    <p>Page title: {page.meta.title}</p>

    {/* Access a custom field's value */}
    <p>Page title: {page.customValues.productId}</p>
  </div>
)
```

--------------------------------

### Bold Mark Plugin Implementation

Source: https://docs.reactbricks.com/llms-small.txt

An example of creating a bold mark plugin using the markPluginConstructor helper, including hotkey support and icon rendering.

```tsx
import React from 'react'
import { FaBold } from 'react-icons/fa'
import { markPluginConstructor } from 'react-bricks/frontend'

const plugin = markPluginConstructor({
  name: 'bold',
  hotKey: 'mod+b',
  render: (props: any) => <strong>{props.children}</strong>,
  icon: <FaBold />,
})

export default plugin
```

--------------------------------

### fetchPages usage example in generateStaticParams

Source: https://docs.reactbricks.com/api-reference/utilities/fetch-pages

An example of using fetchPages within a Next.js generateStaticParams function to retrieve product pages filtered by category and featured status.

```typescript
import { fetchPages } from 'react-bricks/frontend'


export async function generateStaticParams() {
  const products = await fetchPages(process.env.API_KEY!, {
    type: 'product',
    filterBy: {
      category: 'shoes',
      featured: 'true',
    },
    sort: '-publishedAt',
  })


  const items = Array.isArray(products) ? products : products.items


  return items.map((product) => ({
    slug: product.slug,
  }))
}
```

--------------------------------

### getBricks

Source: https://docs.reactbricks.com/rsc

Retrieves all configuration bricks in a server component.

```APIDOC
## getBricks

### Description
Function to get all the configuration’s bricks in a server component.

### Signature
`getBricks(): types.Bricks`
```
Tokens:
Raw