You can automatically generate views for your resources using @refinedev/inferencer
. Inferencer exports the AntdListInferencer
, AntdShowInferencer
, AntdEditInferencer
, AntdCreateInferencer
components and finally the AntdInferencer
component, which combines all in one place.
Usage Inferencer components can be imported from @refinedev/inferencer/antd
. You can directly use the components in your routes without passing any props. If you use a routerProvider
, it will infer the resource
, action
and id
from the current route.
Inresources
prop In Custom Components import routerProvider from "@refinedev/react-router-v6" ; import { BrowserRouter } from "react-router-dom" ; import { AntdInferencer } from "@refinedev/inferencer/antd" ; const App = ( ) => { return ( < BrowserRouter > < Refine routerProvider = { routerProvider } resources = { [ { name : "samples" , list : "/samples" , } , ] } > < Routes > < Route path = " /samples " element = { < AntdInferencer /> } /> </ Routes > </ Refine > </ BrowserRouter > ) ; } ;
import { AntdInferencer } from "@refinedev/inferencer/antd" ; const SampleList = ( ) => { return ( < AntdInferencer resource = " samples " action = " list " /> ) ; } ; const SampleShow = ( ) => { return ( < AntdInferencer resource = " samples " action = " show " id = " 1 " /> ) ; } ; const SampleCreate = ( ) => { return ( < AntdInferencer resource = " samples " action = " create " /> ) ; } ; const SampleEdit = ( ) => { return ( < AntdInferencer resource = " samples " action = " edit " id = " 1 " /> ) ; } ;
For more information, refer to the Inferencer documentation
Views List
Generates a sample list view for your resources according to the API response. It uses the List
and Table
components with the useTable
hook from @refinedev/antd
.
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { ThemedLayoutV2 , RefineThemes } from "@refinedev/antd" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { ConfigProvider } from "antd" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { AntdInferencer } from "@refinedev/inferencer/antd" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < BrowserRouter > < ConfigProvider theme = { RefineThemes . Blue } > < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , list : "/samples" , } , ] } > < Routes > < Route element = { < ThemedLayoutV2 > < Outlet /> </ ThemedLayoutV2 > } > < Route path = " /samples " element = { < AntdInferencer /> } /> </ Route > </ Routes > </ Refine > </ ConfigProvider > </ BrowserRouter > ) ; } ;
Show
Generates a sample show view for your resources according to the API response. It uses the Show
and field components from @refinedev/antd
with the useShow
hook from @refinedev/core
.
localhost:3000/samples/show/123
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { RefineThemes , ThemedLayoutV2 } from "@refinedev/antd" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { ConfigProvider } from "antd" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { AntdInferencer } from "@refinedev/inferencer/antd" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < BrowserRouter > < ConfigProvider theme = { RefineThemes . Blue } > < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , show : "/samples/show/:id" , } , ] } > < Routes > < Route element = { < ThemedLayoutV2 > < Outlet /> </ ThemedLayoutV2 > } > < Route path = " /samples/show/:id " element = { < AntdInferencer /> } /> </ Route > </ Routes > </ Refine > </ ConfigProvider > </ BrowserRouter > ) ; } ;
Create
Generates a sample create view for your resources according to the first record in list API response. It uses the Create
component and the useForm
hook from @refinedev/antd
.
localhost:3000/samples/create
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { ThemedLayoutV2 , RefineThemes } from "@refinedev/antd" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { ConfigProvider } from "antd" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { AntdInferencer } from "@refinedev/inferencer/antd" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < BrowserRouter > < ConfigProvider theme = { RefineThemes . Blue } > < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , create : "/samples/create" , } , ] } > < Routes > < Route element = { < ThemedLayoutV2 > < Outlet /> </ ThemedLayoutV2 > } > < Route path = " /samples/create " element = { < AntdInferencer /> } /> </ Route > </ Routes > </ Refine > </ ConfigProvider > </ BrowserRouter > ) ; } ;
Edit
Generates a sample edit view for your resources according to the API response. It uses the Edit
component and the useForm
hook from @refinedev/antd
.
localhost:3000/samples/edit/123
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { ThemedLayoutV2 , RefineThemes } from "@refinedev/antd" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { ConfigProvider } from "antd" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { AntdInferencer } from "@refinedev/inferencer/antd" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < BrowserRouter > < ConfigProvider theme = { RefineThemes . Blue } > < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , edit : "/samples/edit/:id" , } , ] } > < Routes > < Route element = { < ThemedLayoutV2 > < Outlet /> </ ThemedLayoutV2 > } > < Route path = " /samples/edit/:id " element = { < AntdInferencer /> } /> </ Route > </ Routes > </ Refine > </ ConfigProvider > </ BrowserRouter > ) ; } ;
Example Below you'll find a Live CodeSandbox Example displaying a fully setup refine app with the @refinedev/inferencer/antd
components.
npm create refine-app@latest -- --example inferencer-antd