Payload Admin Bar

An admin bar for React apps using Payload as a headless CMS.

Installation

$ npm i payload-admin-bar
$ # or
$ yarn add payload-admin-bar

Basic Usage

import { PayloadAdminBar } from "payload-admin-bar";

export const App = () => {
  return (
    <PayloadAdminBar
      cmsURL="https://cms.website.com"
      collection="pages"
      id="12345"
    />
  );
};

Checks for authentication with Payload CMS by hitting the /me route. If authenticated, renders an admin bar with simple controls to do the following:

• Navigate to the admin dashboard
• Navigate to the currently logged-in user's account
• Edit the current collection
• Create a new collection of the same type
• Logout
• Indicate and exit preview mode

The admin bar ships with very little style and is fully customizable.

Dynamic props

With client-side routing, we need to update the admin bar with a new collection type and document id on each route change. This will depend on your app's specific setup, but here are a some common examples:

NextJS

For NextJS apps using dynamic-routes, use getStaticProps:

export const getStaticProps = async ({ params: { slug } }) => {
  const props = {};

  const pageReq = await fetch(`https://cms.website.com/api/pages?where[slug][equals]=${slug}&depth=1`);
  const pageData = await pageReq.json();

  if (pageReq.ok) {
    const { docs } = pageData;
    const [doc] = docs;

    props = {
      ...doc,
      collection: 'pages',
      collectionLabels: {
        singular: 'page',
        plural: 'pages',
      }
    };
  }

  return props;
}

Now your app can forward these props onto the admin bar. Something like this:

import { PayloadAdminBar } from 'payload-admin-bar';

export const App = (appProps) => {
  const {
    pageProps: {
      collection,
      collectionLabels,
      id
    }
  } = appProps;

  return (
    <PayloadAdminBar
      {...{
        cmsURL: 'https://cms.website.com',
        collection,
        collectionLabels,
        id
      }}
    />
  )
}

Props

| Property | Type | Required | Default | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | cmsURL | string | true | http://localhost:8000 | serverURL as defined in your Payload config | | adminPath | string | false | /admin | routes as defined in your Payload config | | apiPath | string | false | /api | routes as defined in your Payload config | | collection | string | true | undefined | Slug of your collection | | collectionLabels | { singular?: string, plural?: string } | false | undefined | Labels of your collection | | id | string | true | undefined | id of the document | | logo | ReactElement | false | undefined | Custom logo | | classNames | { logo?: string, user?: string, controls?: string, create?: string, logout?: string, edit?: string, preview?: string } | false | undefined | Custom class names, one for each rendered element | | logoProps | {[key: string]?: unknown} | false | undefined | Custom props | | userProps | {[key: string]?: unknown} | false | undefined | Custom props | | divProps | {[key: string]?: unknown} | false | undefined | Custom props | | createProps | {[key: string]?: unknown} | false | undefined | Custom props | | logoutProps | {[key: string]?: unknown} | false | undefined | Custom props | | editProps | {[key: string]?: unknown} | false | undefined | Custom props | | previewProps | {[key: string]?: unknown} | false | undefined | Custom props | | style | CSSProperties | false | undefined | Custom inline style | | unstyled | boolean | false | undefined | If true, renders no inline style | | onAuthChange | (user: PayloadMeUser) => void | false | undefined | Fired on each auth change | | devMode | boolean | false | undefined | If true, fakes authentication (useful when dealing with SameSite cookies) | | preview | boolean | false | undefined | If true, renders an exit button with your onPreviewExit handler) | | onPreviewExit | function | false | undefined | Callback for the preview button onClick event) |