react-admin

Guide building and debugging react-admin admin interfaces with providers and CRUD configuration.

1.2k|169|Updated Apr 17, 2019
One-click install
npx skills add https://github.com/Awesome-Technologies/synapse-admin --skill react-admin-awesome-technologies
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-admin
Source: https://github.com/Awesome-Technologies/synapse-admin/tree/main/.agents/skills/react-admin
Command: npx skills add https://github.com/Awesome-Technologies/synapse-admin --skill react-admin-awesome-technologies

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developing, modifying, or debugging react-admin applications requires deep knowledge of its provider system, composition patterns, and built-in hooks, which can slow down development and lead to inconsistent implementations. This Skill eliminates that friction by providing clear, actionable guidance for all common react-admin development tasks.

Core Features & Use Cases

  • Provider implementation guidance: Helps correctly set up data, authentication, and i18n providers to handle API communication, user login, and translations without direct HTTP calls.
  • Component and hook best practices: Provides instructions for using pre-built react-admin components and controller hooks to avoid redundant custom code and follow framework conventions.
  • Relationship and form handling: Covers implementing related entity fields/inputs, form validation, and custom resource definitions for standard CRUD admin use cases. For example, use this Skill to build an admin panel for a user management system with correct team relationship references and email validation on user creation forms.

Quick Start

Use the react-admin skill to add a reference input for the "department" resource to the employee edit form and set up required validation for the employee ID field.

Frequently Asked Questions about react-admin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a data provider for a react-admin CRUD app?▼

Configuring a data provider in a react-admin CRUD app involves mapping the framework's data provider interface to your API, ensuring state management and data fetching comply with react-admin composition patterns without direct HTTP calls.

What is the best way to add reference inputs for related entities in react-admin forms?▼

The best way to add reference inputs for related entities in react-admin forms is using built-in components and controller hooks to handle entity relationships, ensuring proper configuration of custom resource definitions for standard CRUD operations.

How do I implement form validation and authorization logic in an admin panel?▼

To implement form validation and authorization logic in an admin panel, apply react-admin composition patterns, use built-in hooks for validation rules, and configure custom routing to control access based on user authentication states.

Does this guidance cover setting up authentication and internationalization providers?▼

Yes, this guidance covers setting up authentication and internationalization providers, detailing how to handle user login flows and translations by utilizing the react-admin provider system rather than managing direct HTTP requests.

Why should I use built-in react-admin hooks instead of writing custom code for my admin interface?▼

You should use built-in react-admin hooks instead of custom code to avoid redundant implementations, adhere to framework best practices for data fetching, and maintain consistency across your admin interface's API communication and composition patterns.