@comparaonline/admin
v1.58.3
Published
A small library that provides the basics to create an Admin.
Downloads
100
Maintainers
Keywords
Readme
Comparaonline | Admin generator
A simple and configurable base template for generating admins without the overload of unnecessary libraries.
Installation
You can install it using: npm
npm install @comparaonline/admin
yarn
yarn add @comparaonline/admin
Usage
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@comparaonline/admin/index.css';
import { Admin } from '@comparaonline/admin';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Admin />
</React.StrictMode>
);
This usage will render the welcome screen. In order to start rendering routes, you'll need to set routes prop:
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@comparaonline/admin/index.css';
import { Admin } from '@comparaonline/admin';
import { routes } from './example';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Admin routes={routes} />
</React.StrictMode>
);
Those are a list of objects containing the following fields:
export type Route = {
/**
* Route element.
* @see {@link https://v5.reactrouter.com/web/api/Route|react-router-dom Route}
*/
route: ReactElement;
/**
* Label to be displayed on
* aside menu.
*/
menuLabel?: string;
/**
* Icon to be displayed on
* aside menu, next to 'menuLabel'.
*/
menuIcon?: ReactElement;
/**
* Skip aside menu entry.
*/
menuSkip?: boolean;
/**
* Array of roles that
* can access content.
*/
privileges?: string[];
/**
* Array of companies that
* can access content.
*/
companiesPrivileges?: string[];
/**
* Main title to be displayed on
* the page.
*/
title?: string;
/**
* Subtitle to be displayed on
* the page.
*/
subtitle?: string;
/**
* Has page wrapper structure
* (title, subtitle).
*/
hasPageWrapper?: boolean;
/**
* Has width wrapper structure.
*/
hasWrapper?: boolean;
hasLayout?: boolean;
key?: number;
};
By default, authentication is not enabled, to start using it, you'll need to set an authProvider:
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@comparaonline/admin/index.css';
import { Admin } from '@comparaonline/admin';
import { routes, authProvider } from './example';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Admin routes={routes} authProvider={authProvider} />
</React.StrictMode>
);
These provider has this structure:
export type AuthProvider = {
login: (
params?: Record<string, unknown> | unknown
) => Promise<{ redirectTo?: string | boolean } | void>;
logout: (params?: Record<string, unknown> | unknown) => Promise<void | boolean | string>;
checkAuth: (params?: Record<string, unknown> | unknown) => Promise<void>;
googleLogin?: (
params?: Record<string, unknown> | unknown
) => Promise<{ redirectTo?: string | boolean } | void>;
restorePassword?: (params?: Record<string, unknown> | unknown) => Promise<{
status: STATUS.SUCCESS | STATUS.ERROR;
message: string;
username: string;
}>;
editUser?: () => void;
};
Contributing
Read the contributing guide to learn about our development process and how to build, test and commit your changes to this repository.