# payload-admin-bar
> An admin bar for React apps using Payload CMS
Latest version **1.0.7** (published 2025-03-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install payload-admin-bar
pnpm add payload-admin-bar
yarn add payload-admin-bar
bun add payload-admin-bar
```
## Health
**Score 30/100 (F)** — status: maintenance-mode.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.7 |
| Published | 2025-03-03 |
| First published | 2021-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 36 |
| Author | jacobsfletch@gmail.com |
| Maintainers | jacobsfletch |
| Keywords | payload, cms, admin, plugin, typescript, react |
## Links
- npm: https://www.npmjs.com/package/payload-admin-bar
- Repository: https://github.com/jacobsfletch/payload-admin-bar
- Homepage: https://github.com/jacobsfletch/payload-admin-bar#readme
- Issues: https://github.com/jacobsfletch/payload-admin-bar/issues
- npm.io page: https://npm.io/package/payload-admin-bar
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.7 (latest) — 2025-03-03
- 1.0.6 — 2023-05-24
- 1.0.5 — 2022-10-24
- 1.0.4 — 2022-10-24
- 1.0.3 — 2021-12-02
- 1.0.2 — 2021-12-02
- 1.0.1 — 2021-11-08
- 1.0.0 — 2021-11-08
## README
# Payload Admin Bar
An admin bar for React apps using [Payload](https://github.com/payloadcms/payload) as a headless CMS.
### Installation
```bash
$ npm i payload-admin-bar
$ # or
$ yarn add payload-admin-bar
```
### Basic Usage
```jsx
import { PayloadAdminBar } from "payload-admin-bar";
export const App = () => {
return (
);
};
```
Checks for authentication with Payload CMS by hitting the [`/me`](https://payloadcms.com/docs/authentication/operations#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 (
)
}
```
### Props
| Property | Type | Required | Default | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cmsURL | `string` | true | `http://localhost:8000` | `serverURL` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
| adminPath | `string` | false | /admin | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
| apiPath | `string` | false | /api | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
| authCollection | `string` | false | 'users' | Slug of your [auth collection](https://payloadcms.com/docs/configuration/collections) |
| collection | `string` | true | undefined | Slug of your [collection](https://payloadcms.com/docs/configuration/collections) |
| collectionLabels | `{ singular?: string, plural?: string }` | false | undefined | Labels of your [collection](https://payloadcms.com/docs/configuration/collections) |
| 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)) |
| 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) |
---
_Source: https://npm.io/package/payload-admin-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._