React Bricks

Admin


The Admin component should wrap all the components used in the Admin Dashboard, which are:

It provides context variables, like the authenticated user, to the children components.

See also AdminContext

Props

interface AdminProps {
  isLogin?: boolean
}

The only prop you can specify is isLogin.
It is a boolean value to identify the Login page. It is needed to correctly manage the authentication process.

Usage example, wrapping the Editor component (from the Vanilla React starter)

import React from 'react'
import { Admin, Editor } from 'react-bricks'

const EditorPage = () => {
  return (
    <Admin>
      <Editor />
    </Admin>
  )
}

export default EditorPage

Usage example, wrapping the Login component (from the Vanilla React starter)

Note the isLogin prop.

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

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

export default LoginPage

AdminContext

The Admin component provides the configuration to the children components, using the AdminContext, which has the following TypeScript interface:

interface IAdminContext {
    isAdmin: boolean
    user: User | null
    setUser: (user: User) => void
    currentPage: string
    setCurrentPage: (page: string) => void
    previewMode: boolean
    setPreviewMode: (previewMode: boolean) => void
    sidebarCollapsed: boolean
    setSidebarCollapsed: (sidebarCollapsed: boolean) => void
    getStyles: () => NodeListOf<HTMLStyleElement> | []
    getStylesheets: () => NodeListOf<HTMLLinkElement> | []
  }