You can automatically generate views for your resources using @pankod/refine-inferencer
. Inferencer exports MantineListInferencer
, MantineShowInferencer
, MantineEditInferencer
, MantineCreateInferencer
and MantineInferencer
(which combines all in one place) components.
Usage Mantine components can be imported from @pankod/refine-inferencer/mantine
. 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 { Layout , MantineProvider , LightTheme , Global , } from "@pankod/refine-mantine" ; import { MantineInferencer } from "@pankod/refine-inferencer/mantine" ; const App = ( ) => { return ( < MantineProvider theme = { LightTheme } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < Refine resources = { [ { name : "samples" , list : MantineInferencer , show : MantineInferencer , create : MantineInferencer , edit : MantineInferencer , } , ] } /> </ MantineProvider > ) ; } ;
import { MantineInferencer } from "@pankod/refine-inferencer/mantine" ; const SampleList = ( ) => { return ( < MantineInferencer resource = " samples " action = " list " /> ) ; } ; const SampleShow = ( ) => { return ( < MantineInferencer resource = " samples " action = " show " id = " 1 " /> ) ; } ; const SampleCreate = ( ) => { return ( < MantineInferencer resource = " samples " action = " create " /> ) ; } ; const SampleEdit = ( ) => { return ( < MantineInferencer 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 List
component and from @pankod/refine-mantine
and 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 { Layout , MantineProvider , LightTheme , Global , } from "@pankod/refine-mantine" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { MantineInferencer } from "@pankod/refine-inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { LightTheme } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } Layout = { Layout } resources = { [ { name : "samples" , list : MantineInferencer , show : MantineInferencer , create : MantineInferencer , edit : MantineInferencer , canDelete : true , } , { name : "categories" , list : MantineInferencer , show : MantineInferencer , } , { name : "tags" , list : MantineInferencer , show : MantineInferencer , } , ] } /> </ MantineProvider > ) ; } ;
Show
Generates a sample show view for your resources according to the API response. It uses Show
and field components from @pankod/refine-mantine
with 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 { Layout , MantineProvider , LightTheme , Global , } from "@pankod/refine-mantine" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { MantineInferencer } from "@pankod/refine-inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { LightTheme } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } Layout = { Layout } resources = { [ { name : "samples" , list : MantineInferencer , show : MantineInferencer , create : MantineInferencer , edit : MantineInferencer , canDelete : true , } , { name : "categories" , list : MantineInferencer , show : MantineInferencer , } , { name : "tags" , list : MantineInferencer , show : MantineInferencer , } , ] } /> </ MantineProvider > ) ; } ;
Create
Generates a sample create view for your resources according to the first record in list API response. It uses Create
component and useForm
hook from @pankod/refine-mantine
.
localhost:3000/samples/create
Live previews only work with the latest documentation.
Show Code Hide Code import { Refine } from "@pankod/refine-core" ; import { Layout , MantineProvider , LightTheme , Global , } from "@pankod/refine-mantine" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { MantineInferencer } from "@pankod/refine-inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { LightTheme } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } Layout = { Layout } resources = { [ { name : "samples" , list : MantineInferencer , show : MantineInferencer , create : MantineInferencer , edit : MantineInferencer , canDelete : true , } , { name : "categories" , list : MantineInferencer , show : MantineInferencer , } , { name : "tags" , list : MantineInferencer , show : MantineInferencer , } , ] } /> </ MantineProvider > ) ; } ;
Edit
Generates a sample edit view for your resources according to the API response. It uses Edit
component and useForm
hook from @pankod/refine-mantine
.
localhost:3000/samples/edit/123
Live previews only work with the latest documentation.
Show Code Hide Code import { Refine } from "@pankod/refine-core" ; import { Layout , MantineProvider , LightTheme , Global , } from "@pankod/refine-mantine" ; import routerProvider from "@pankod/refine-react-router-v6" ; import dataProvider from "@pankod/refine-simple-rest" ; import { MantineInferencer } from "@pankod/refine-inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { LightTheme } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } Layout = { Layout } resources = { [ { name : "samples" , list : MantineInferencer , show : MantineInferencer , create : MantineInferencer , edit : MantineInferencer , canDelete : true , } , { name : "categories" , list : MantineInferencer , show : MantineInferencer , } , { name : "tags" , list : MantineInferencer , show : MantineInferencer , } , ] } /> </ MantineProvider > ) ; } ;
Example Below you'll find a Live CodeSandbox Example displaying a fully setup Refine
app with @pankod/refine-inferencer/mantine
components.
npm create refine-app@latest -- --example inferencer-mantine