UI Components for react-admin with Material UI styling and functionality
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Core admin interface components providing the foundational structure and context for react-admin applications.
Main admin interface wrapper component that provides the complete UI shell including routing, theme, and layout management.
/**
* Main admin interface wrapper component providing the complete UI shell
* @param props - AdminUI configuration props
* @returns Complete admin interface with routing and theme
*/
function AdminUI(props: AdminUIProps): ReactElement;
interface AdminUIProps {
/** Layout component to use for the admin interface */
layout?: ComponentType<LayoutProps>;
/** Material UI theme configuration */
theme?: Theme;
/** Child components and routes */
children?: ReactNode;
/** Custom app bar component */
appBar?: ComponentType<AppBarProps>;
/** Custom sidebar component */
sidebar?: ComponentType<SidebarProps>;
/** Custom menu component */
menu?: ComponentType<MenuProps>;
/** Catch all component for unknown routes */
catchAll?: ComponentType;
/** Loading component */
loading?: ComponentType;
/** Custom login page component */
loginPage?: ComponentType<LoginProps>;
/** Disable authentication */
disableAuthentication?: boolean;
}Usage Examples:
import { AdminUI, Layout, defaultTheme } from "ra-ui-materialui";
// Basic admin UI
const App = () => (
<AdminUI layout={Layout} theme={defaultTheme}>
{/* Resource definitions and routes */}
</AdminUI>
);
// Custom admin UI with theme
const App = () => (
<AdminUI
layout={Layout}
theme={radiantDarkTheme}
loginPage={CustomLogin}
>
{/* Admin content */}
</AdminUI>
);Context provider for admin application state and configuration, managing data providers, authentication, and internationalization.
/**
* Context provider for admin application state and configuration
* @param props - AdminContext configuration props
* @returns Provider component with admin context
*/
function AdminContext(props: AdminContextProps): ReactElement;
interface AdminContextProps {
/** Data provider for API operations */
dataProvider?: DataProvider;
/** Authentication provider */
authProvider?: AuthProvider;
/** Internationalization provider */
i18nProvider?: I18nProvider;
/** Navigation history instance */
history?: History;
/** Child components */
children?: ReactNode;
/** Base name for routing */
basename?: string;
}Usage Examples:
import { AdminContext } from "ra-ui-materialui";
import { dataProvider, authProvider, i18nProvider } from "./providers";
const App = () => (
<AdminContext
dataProvider={dataProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}
>
{/* Admin interface components */}
</AdminContext>
);interface DataProvider {
getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
create: (resource: string, params: CreateParams) => Promise<CreateResult>;
update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
deleteMany: (resource: string, params: DeleteManyParams) => Promise<DeleteManyResult>;
updateMany: (resource: string, params: UpdateManyParams) => Promise<UpdateManyResult>;
}
interface AuthProvider {
login: (params: any) => Promise<any>;
logout: (params: any) => Promise<void | false | string>;
checkAuth: (params: any) => Promise<void>;
checkError: (error: any) => Promise<void>;
getIdentity: () => Promise<UserIdentity>;
getPermissions: (params: any) => Promise<any>;
}
interface I18nProvider {
translate: (key: string, options?: any) => string;
changeLocale: (locale: string) => Promise<void>;
getLocale: () => string;
getMessages: () => any;
}
interface UserIdentity {
id: string | number;
fullName?: string;
avatar?: string;
[key: string]: any;
}Install with Tessl CLI
npx tessl i tessl/npm-ra-ui-materialui