tessl/npm-react-admin

A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Core Admin & Resources

Name: tessl/npm-react-admin
Author: tessl

This section covers the foundational components for setting up and configuring a React Admin application, including the main <Admin> component and resource definitions.

Core Components

Admin Component

The <Admin> component is the root component that initializes the entire React Admin application. It sets up routing, authentication, data providers, and the overall application context.

import { Admin } from 'react-admin';

interface AdminProps {
  authProvider?: AuthProvider;
  dataProvider: DataProvider;
  i18nProvider?: I18nProvider;
  title?: string;
  theme?: Theme;
  layout?: LayoutComponent;
  dashboard?: DashboardComponent;
  loginPage?: LoginComponent | boolean;
  catchAll?: CatchAllComponent;
  loading?: LoadingComponent;
  basename?: string;
  children: React.ReactNode;
  disableTelemetry?: boolean;
  ready?: React.ComponentType;
  store?: Store;
  queryClient?: QueryClient;
  router?: Router;
  history?: History;
}

const Admin: React.FC<AdminProps>;

Parameters

dataProvider (required): The data provider that handles all backend communication
authProvider: Authentication provider for login/logout functionality
i18nProvider: Internationalization provider for multi-language support
title: Application title displayed in the browser tab and app bar
theme: Material-UI theme object for customizing appearance
layout: Custom layout component to replace the default layout
dashboard: Component to display on the home page
loginPage: Custom login page component, or false to disable authentication
catchAll: Component to display for 404 errors
loading: Component to display during initial app loading
basename: Base URL for routing when app is served from a subdirectory
children: Resource definitions and custom routes
store: Custom store for persisting application state
queryClient: Custom React Query client for advanced caching configuration

Usage Example

import { Admin, Resource } from 'react-admin';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import { theme } from './theme';
import Dashboard from './Dashboard';

const App = () => (
  <Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
    title="My Admin App"
    theme={theme}
    dashboard={Dashboard}
  >
    <Resource name="posts" list={PostList} edit={PostEdit} />
    <Resource name="users" list={UserList} edit={UserEdit} />
  </Admin>
);

Resource Component

The <Resource> component defines an entity in your application and its associated views (list, create, edit, show).

import { Resource } from 'react-admin';

interface ResourceProps {
  name: string;
  list?: React.ComponentType;
  create?: React.ComponentType;
  edit?: React.ComponentType;
  show?: React.ComponentType;
  icon?: React.ComponentType;
  options?: ResourceOptions;
  recordRepresentation?: string | RecordToStringFunction;
  hasCreate?: boolean;
  hasEdit?: boolean;
  hasShow?: boolean;
  children?: React.ReactNode;
}

interface ResourceOptions {
  label?: string;
  [key: string]: any;
}

type RecordToStringFunction = (record: RaRecord) => string;

const Resource: React.FC<ResourceProps>;

Parameters

name (required): The resource name, used in URLs and API calls
list: Component to display the list of records
create: Component to create new records
edit: Component to edit existing records
show: Component to display record details
icon: Icon component to display in the menu
options: Additional resource options like custom labels
recordRepresentation: Function or field name to represent records as strings
hasCreate/hasEdit/hasShow: Boolean flags to enable/disable specific views
children: For nested resources or custom routing

Usage Examples

// Basic resource with all views
<Resource 
  name="posts" 
  list={PostList} 
  create={PostCreate}
  edit={PostEdit} 
  show={PostShow}
  icon={PostIcon}
  options={{ label: 'Blog Posts' }}
/>

// Resource with limited views
<Resource 
  name="analytics" 
  list={AnalyticsList}
  hasCreate={false}
  hasEdit={false}
/>

// Resource with record representation
<Resource 
  name="users"
  list={UserList}
  recordRepresentation="name"
/>

// Resource with custom record representation function
<Resource 
  name="products"
  list={ProductList}
  recordRepresentation={(record) => `${record.name} (${record.sku})`}
/>

Core Admin Components

CoreAdmin

Lower-level admin component without Material-UI dependencies, useful for custom UI implementations.

import { CoreAdmin } from 'react-admin';

interface CoreAdminProps {
  authProvider?: AuthProvider;
  dataProvider: DataProvider;
  i18nProvider?: I18nProvider;
  queryClient?: QueryClient;
  store?: Store;
  history?: History;
  children: React.ReactNode;
}

const CoreAdmin: React.FC<CoreAdminProps>;

CoreAdminContext

Provides admin context without rendering any UI, useful for custom layouts.

import { CoreAdminContext } from 'react-admin';

interface CoreAdminContextProps {
  authProvider?: AuthProvider;
  dataProvider: DataProvider;
  i18nProvider?: I18nProvider;
  queryClient?: QueryClient;
  store?: Store;
  history?: History;
  children: React.ReactNode;
}

const CoreAdminContext: React.FC<CoreAdminContextProps>;

CoreAdminRoutes

Defines the routing structure for resources and custom routes.

import { CoreAdminRoutes } from 'react-admin';

interface CoreAdminRoutesProps {
  layout?: LayoutComponent;
  dashboard?: DashboardComponent;
  catchAll?: CatchAllComponent;
  loading?: LoadingComponent;
  children?: React.ReactNode;
}

const CoreAdminRoutes: React.FC<CoreAdminRoutesProps>;

CoreAdminUI

Core UI logic component that renders the admin interface structure.

import { CoreAdminUI } from 'react-admin';

interface CoreAdminUIProps {
  layout?: LayoutComponent;
  dashboard?: DashboardComponent;
  loginPage?: LoginComponent | boolean;
  catchAll?: CatchAllComponent;
  loading?: LoadingComponent;
  title?: string;
}

const CoreAdminUI: React.FC<CoreAdminUIProps>;

Resource Context and Hooks

Resource Context

Access current resource information within components.

import { useResourceContext, useResourceDefinition } from 'react-admin';

// Get current resource name
const useResourceContext: () => string | undefined;

// Get current resource definition
const useResourceDefinition: (options?: { resource?: string }) => ResourceDefinition | undefined;

// Get all resource definitions
const useResourceDefinitions: () => ResourceDefinitionMap;

// Get resource label
const useGetResourceLabel: () => (resource: string, count?: number) => string;

Usage Example

import { useResourceContext, useResourceDefinition } from 'react-admin';

const MyComponent = () => {
  const resource = useResourceContext(); // Current resource name
  const resourceDefinition = useResourceDefinition({ resource });
  
  return (
    <div>
      <h1>Current Resource: {resource}</h1>
      <p>Has create: {resourceDefinition?.hasCreate}</p>
    </div>
  );
};

Resource Definition Types

interface ResourceDefinition {
  name: string;
  options?: ResourceOptions;
  hasList?: boolean;
  hasCreate?: boolean;
  hasEdit?: boolean;
  hasShow?: boolean;
  icon?: React.ComponentType;
  recordRepresentation?: string | RecordToStringFunction;
}

type ResourceDefinitionMap = {
  [key: string]: ResourceDefinition;
};

Custom Routes

Add custom pages and routes to your admin application.

import { CustomRoutes } from 'react-admin';

interface CustomRoutesProps {
  noLayout?: boolean;
  children: React.ReactNode;
}

const CustomRoutes: React.FC<CustomRoutesProps>;

Usage Example

import { Admin, Resource, CustomRoutes } from 'react-admin';
import { Route } from 'react-router-dom';
import ReportsPage from './ReportsPage';
import SettingsPage from './SettingsPage';

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} />
    
    <CustomRoutes>
      <Route path="/reports" element={<ReportsPage />} />
      <Route path="/settings" element={<SettingsPage />} />
    </CustomRoutes>
    
    {/* Routes without layout */}
    <CustomRoutes noLayout>
      <Route path="/public-report" element={<PublicReportPage />} />
    </CustomRoutes>
  </Admin>
);

Record Representation

Control how records are displayed as strings throughout the application.

import { useGetRecordRepresentation } from 'react-admin';

const useGetRecordRepresentation: (resource: string) => (record: RaRecord) => string;

Usage Examples

// String field representation
<Resource name="users" recordRepresentation="name" />

// Function representation
<Resource 
  name="products" 
  recordRepresentation={(record) => `${record.title} - $${record.price}`}
/>

// Using the hook in a component
const ProductReferenceField = ({ record }) => {
  const getRecordRepresentation = useGetRecordRepresentation('products');
  
  return <span>{getRecordRepresentation(record)}</span>;
};

Configuration Examples

Minimal Setup

import { Admin, Resource, ListGuesser } from 'react-admin';
import { dataProvider } from './dataProvider';

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={ListGuesser} />
  </Admin>
);

Full-Featured Setup

import { 
  Admin, 
  Resource, 
  CustomRoutes,
  defaultTheme 
} from 'react-admin';
import { Route } from 'react-router-dom';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import { i18nProvider } from './i18nProvider';
import CustomLayout from './CustomLayout';
import Dashboard from './Dashboard';

const App = () => (
  <Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
    i18nProvider={i18nProvider}
    title="Advanced Admin"
    theme={defaultTheme}
    layout={CustomLayout}
    dashboard={Dashboard}
  >
    <Resource 
      name="posts" 
      list={PostList}
      create={PostCreate}
      edit={PostEdit}
      show={PostShow}
      icon={PostIcon}
      options={{ label: 'Blog Posts' }}
      recordRepresentation="title"
    />
    
    <Resource 
      name="users"
      list={UserList}
      edit={UserEdit}
      hasShow={false}
    />
    
    <CustomRoutes>
      <Route path="/analytics" element={<AnalyticsPage />} />
    </CustomRoutes>
  </Admin>
);

The core admin setup provides the foundation for your React Admin application, with flexible resource definitions and routing capabilities that can scale from simple CRUD interfaces to complex admin systems.

Install with Tessl CLI