useReactBricksContext

const useReactBricksContext = (): types.IReactBricksContext

Hook with no arguments to access the values in ReactBricksContext. It returns an object. The values in the returned object are from the configuration you provided to the ReactBricks component, so you should have them available in your project, but this hook could be useful to access them from any component wrapped by ReactBricks, for example a content block.

Example usage

const { bricks } = useReactBricksContext()

ReactBricksContext

The ReactBricksContext provides configuration context to all the children components.

It has the following TypeScript interface:

interface IReactBricksContext {
  version: string
  appId: string
  apiKey: string
  bricks: Bricks
  themes: types.Theme[]
  pageTypes: IPageType[]
  logo: string
  loginUI: LoginUI
  contentClassName: string
  defaultTheme: string
  renderLocalLink: RenderLocalLink
  navigate: (path: string) => void
  loginPath: string
  editorPath: string
  playgroundPath: string
  appSettingsPath: string
  previewPath: string
  getAdminMenu?: (args: { isAdmin: boolean }) => IMenuItem[]
  isDarkColorMode?: boolean
  toggleColorMode?: () => void
  useCssInJs?: boolean
  appRootElement: string | HTMLElement
  clickToEditSide?: ClickToEditSide
  customFields?: Array<ISideEditPropPage | ISideGroup>
  responsiveBreakpoints: ResponsiveBreakpoint[]
  enableAutoSave: boolean
  disableSaveIfInvalidProps: boolean
  enablePreview: boolean
  browserSupport: { webP: boolean; lazyLoading: boolean }
  blockIconsPosition: BlockIconsPosition
  enablePreviewImage: boolean
  enablePreviewIcon: boolean
  enableUnsplash: boolean
  unsplashApiKey?: string
  enableDefaultEmbedBrick: boolean
  permissions?: Permissions
}

The <ReactBricks> component wraps all the children with the ReactBricksContext Provider.