You can automatically generate views for your resources using @pankod/refine-inferencer
. Inferencer exports HeadlessListInferencer
, HeadlessShowInferencer
, HeadlessEditInferencer
, HeadlessCreateInferencer
and HeadlessInferencer
(which combines all in one place) components.
Usage Ant Design components can be imported from @pankod/refine-inferencer/headless
. You can directly use the components in resources
prop of Refine
component or you can use them in your custom components by passing the resource
prop as the resource name.
Inresources
prop In Custom Components import { HeadlessInferencer } from "@pankod/refine-inferencer/headless" ; const App = ( ) => { return ( < Refine resources = { [ { name : "samples" , list : HeadlessInferencer , show : HeadlessInferencer , create : HeadlessInferencer , edit : HeadlessInferencer , } , ] } /> ) ; } ;
import { HeadlessInferencer } from "@pankod/refine-inferencer/headless" ; const SampleList = ( ) => { return ( < HeadlessInferencer resource = " samples " action = " list " /> ) ; } ; const SampleShow = ( ) => { return ( < HeadlessInferencer resource = " samples " action = " show " id = " 1 " /> ) ; } ; const SampleCreate = ( ) => { return ( < HeadlessInferencer resource = " samples " action = " create " /> ) ; } ; const SampleEdit = ( ) => { return ( < HeadlessInferencer resource = " samples " action = " edit " id = " 1 " /> ) ; } ;
To learn more about @pankod/refine-inferencer
package, please check out Docs
Views List
Generates a sample list view for your resources according to the API response. It uses useTable
hook from @pankod/refine-react-table
.
Live previews only work with the latest documentation.
Show Code Hide Code import { Refine } from "@pankod/refine-core" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { HeadlessInferencer } from "@pankod/refine-inferencer/headless" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , list : HeadlessInferencer , show : HeadlessInferencer , create : HeadlessInferencer , edit : HeadlessInferencer , canDelete : true , } , { name : "categories" , list : HeadlessInferencer , show : HeadlessInferencer , } , { name : "tags" , list : HeadlessInferencer , show : HeadlessInferencer , } , ] } /> ) ; } ;
Show
Generates a sample show view for your resources according to the API response. It uses useShow
hook from @pankod/refine-core
.
localhost:3000/samples/show/123
Live previews only work with the latest documentation.
Show Code Hide Code import { Refine } from "@pankod/refine-core" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { HeadlessInferencer } from "@pankod/refine-inferencer/headless" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , list : HeadlessInferencer , show : HeadlessInferencer , create : HeadlessInferencer , edit : HeadlessInferencer , canDelete : true , } , { name : "categories" , list : HeadlessInferencer , show : HeadlessInferencer , } , { name : "tags" , list : HeadlessInferencer , show : HeadlessInferencer , } , ] } /> ) ; } ;
Create
Generates a sample create view for your resources according to the first record in list API response. It uses useForm
hook from @pankod/refine-react-hook-form
.
localhost:3000/samples/create
Live previews only work with the latest documentation.
Show Code Hide Code import { Refine } from "@pankod/refine-core" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { HeadlessInferencer } from "@pankod/refine-inferencer/headless" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , list : HeadlessInferencer , show : HeadlessInferencer , create : HeadlessInferencer , edit : HeadlessInferencer , canDelete : true , } , { name : "categories" , list : HeadlessInferencer , show : HeadlessInferencer , } , { name : "tags" , list : HeadlessInferencer , show : HeadlessInferencer , } , ] } /> ) ; } ;
Edit
Generates a sample edit view for your resources according to the API response. It uses useForm
hook from @pankod/refine-react-hook-form
.
localhost:3000/samples/edit/123
Live previews only work with the latest documentation.
Show Code Hide Code import { Refine } from "@pankod/refine-core" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { HeadlessInferencer } from "@pankod/refine-inferencer/headless" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , list : HeadlessInferencer , show : HeadlessInferencer , create : HeadlessInferencer , edit : HeadlessInferencer , canDelete : true , } , { name : "categories" , list : HeadlessInferencer , show : HeadlessInferencer , } , { name : "tags" , list : HeadlessInferencer , show : HeadlessInferencer , } , ] } /> ) ; } ;
Example Below you'll find a Live CodeSandbox Example displaying a fully setup Refine
app with @pankod/refine-inferencer/headless
components.
npm create refine-app@latest -- --example inferencer-headless