An admin bar for React apps using Payload CMS
npm install payload-admin-barAn admin bar for React apps using Payload as a headless CMS.
``bash`
$ npm i payload-admin-bar
$ # or
$ yarn add payload-admin-bar
`jsx
import { PayloadAdminBar } from "payload-admin-bar";
export const App = () => {
return (
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.
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 (
cmsURL: 'https://cms.website.com',
collection,
collectionLabels,
id
}}
/>
)
}
`
| Property | Type | Required | Default | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cmsURL | string | true | http://localhost:8000 | serverURL as defined in your Payload config |string
| adminPath | | false | /admin | routes as defined in your Payload config |string
| apiPath | | false | /api | routes as defined in your Payload config |string
| authCollection | | false | 'users' | Slug of your auth collection |string
| collection | | true | undefined | Slug of your collection |{ singular?: string, plural?: string }
| collectionLabels | | false | undefined | Labels of your collection |string
| id | | true | undefined | id of the document |ReactElement
| logo | | false | undefined | Custom logo |{ logo?: string, user?: string, controls?: string, create?: string, logout?: string, edit?: string, preview?: string }
| classNames | | false | undefined | Custom class names, one for each rendered element |{[key: string]?: unknown}
| logoProps | | false | undefined | Custom props |{[key: string]?: unknown}
| userProps | | false | undefined | Custom props |{[key: string]?: unknown}
| divProps | | false | undefined | Custom props |{[key: string]?: unknown}
| createProps | | false | undefined | Custom props |{[key: string]?: unknown}
| logoutProps | | false | undefined | Custom props |{[key: string]?: unknown}
| editProps | | false | undefined | Custom props |{[key: string]?: unknown}
| previewProps | | false | undefined | Custom props |CSSProperties
| style | | false | undefined | Custom inline style |boolean
| unstyled | | false | undefined | If true, renders no inline style |(user: PayloadMeUser) => void
| onAuthChange | | false | undefined | Fired on each auth change |boolean
| devMode | | false | undefined | If true, fakes authentication (useful when dealing with SameSite cookies) |boolean
| preview | | false | undefined | If true, renders an exit button with your onPreviewExit handler) |function
| onPreviewExit | | false | undefined | Callback for the preview button onClick` event) |