Modern TypeScript-first React admin panel builder with Ant Design 6
npm install react-antd-admin-panelbash
npm install react-antd-admin-panel antd @ant-design/icons
`
Quick Start
$3
`bash
npx create-raap-app my-admin-app
cd my-admin-app
npm install
npm run dev
`
$3
`tsx
import { MainProvider, List, Get } from 'react-antd-admin-panel';
function App() {
return (
);
}
function UserList() {
const list = new List()
.get(() => new Get().target('/users'))
.column('name', 'Name', { sorter: true })
.column('email', 'Email')
.footer(true);
return list.render();
}
`
Core Concepts
$3
Type-safe HTTP requests with builder pattern:
`tsx
import { Get, Post } from 'react-antd-admin-panel/http';
// GET request
const users = new Get()
.target('/api/users')
.params({ page: 1, limit: 10 })
.onThen((data) => console.log(data))
.onCatch((error) => console.error(error));
await users.fetch();
// POST request
const createUser = new Post()
.target('/api/users')
.body({ name: 'John', email: 'john@example.com' })
.onThen((user) => console.log('Created:', user));
await createUser.execute();
`
$3
Modern React hooks for common patterns:
`tsx
import { useGet, usePost, useForm, useAccess } from 'react-antd-admin-panel/hooks';
function Users() {
const { data, loading, error, refetch } = useGet('/api/users');
if (loading) return
if (error) return
return
}
`
$3
Data tables with sorting, filtering, and pagination:
`tsx
import { List } from 'react-antd-admin-panel/list';
import { Get } from 'react-antd-admin-panel/http';
const userList = new List()
.get(() => new Get().target('/api/users'))
.column('name', 'Name', { sorter: true })
.column('email', 'Email', { width: 200 })
.column('role', 'Role', (value) => {value} )
.pagination({ pageSize: 20 })
.footer(true);
`
$3
Form inputs with validation:
`tsx
import { Input, Select } from 'react-antd-admin-panel/form';
const nameInput = new Input()
.key('name')
.label('Full Name')
.required(true)
.placeholder('Enter your name');
const roleSelect = new Select<'admin' | 'user'>()
.key('role')
.label('Role')
.options([
{ label: 'Admin', value: 'admin' },
{ label: 'User', value: 'user' }
]);
`
$3
Role-based access control:
`tsx
import { AccessGuard } from 'react-antd-admin-panel/access';
No access}>
`
$3
Buttons with built-in confirmation dialogs:
`tsx
import { ActionButton } from 'react-antd-admin-panel/action';
const deleteButton = new ActionButton()
.label('Delete')
.danger(true)
.confirm({
title: 'Delete User?',
content: 'This action cannot be undone.',
okText: 'Delete',
cancelText: 'Cancel'
})
.onClick(async () => {
await deleteUser(userId);
});
`
Subpath Exports
Import only what you need for optimal bundle size:
`tsx
import { List } from 'react-antd-admin-panel/list';
import { Input, Select } from 'react-antd-admin-panel/form';
import { Get, Post } from 'react-antd-admin-panel/http';
import { useGet, usePost } from 'react-antd-admin-panel/hooks';
import { MainProvider } from 'react-antd-admin-panel/main';
import { Section } from 'react-antd-admin-panel/section';
import { AccessGuard } from 'react-antd-admin-panel/access';
import { Formula } from 'react-antd-admin-panel/formula';
import { ActionButton } from 'react-antd-admin-panel/action';
import { createMockMain, createMockList } from 'react-antd-admin-panel/testing';
`
Testing
The library provides testing utilities for unit and integration tests. See the Testing Guide for detailed documentation.
`tsx
import { createMockMain, createMockList, createMockHttp } from 'react-antd-admin-panel/testing';
// Create a mock Main context for testing
const { wrapper, mockNavigate } = createMockMain({
user: { id: '1', name: 'Test User', role: 'admin' },
});
render(
``