You can automatically generate views for your resources using @refinedev/inferencer
. Inferencer exports MantineListInferencer
, MantineShowInferencer
, MantineEditInferencer
, MantineCreateInferencer
components and finally the MantineInferencer
component, which combines all in one place.
Usage Inferencer components can be imported from @refinedev/inferencer/mantine
. 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 { Layout , Global } from "@refinedev/mantine" ; import { MantineProvider , LightTheme } from "@mantine/core" ; import { MantineInferencer } from "@refinedev/inferencer/mantine" ; const App = ( ) => { return ( < MantineProvider theme = { LightTheme } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < BrowserRouter > < Refine routerProvider = { routerProvider } resources = { [ { name : "samples" , list : "/samples" , } , ] } > < Routes > < Route path = " /samples " element = { < MantineInferencer /> } /> </ Routes > </ Refine > </ BrowserRouter > </ MantineProvider > ) ; } ;
import { MantineInferencer } from "@refinedev/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 @refinedev/inferencer
package, please check out its Documentation
Views List
Generates a sample list view for your resources according to the API response. It uses the List
component and from @refinedev/mantine
and the useTable
hook from @refinedev/react-table
.
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { ThemedLayoutV2 , RefineThemes } from "@refinedev/mantine" ; import { MantineProvider , Global } from "@mantine/core" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { MantineInferencer } from "@refinedev/inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { RefineThemes . Blue } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < BrowserRouter > < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , list : "/samples" , } , ] } > < Routes > < Route element = { < ThemedLayoutV2 > < Outlet /> </ ThemedLayoutV2 > } > < Route path = " /samples " element = { < MantineInferencer /> } /> </ Route > </ Routes > </ Refine > </ BrowserRouter > </ MantineProvider > ) ; } ;
Show
Generates a sample show view for your resources according to the API response. It uses the Show
and field components from @refinedev/mantine
with the useShow
hook from @refinedev/core
.
localhost:3000/samples/show/123
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { ThemedLayoutV2 , RefineThemes } from "@refinedev/mantine" ; import { MantineProvider , Global } from "@mantine/core" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { MantineInferencer } from "@refinedev/inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { RefineThemes . Blue } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < BrowserRouter > < 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 = { < MantineInferencer /> } /> </ Route > </ Routes > </ Refine > </ BrowserRouter > </ MantineProvider > ) ; } ;
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/mantine
.
localhost:3000/samples/create
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { ThemedLayoutV2 , RefineThemes } from "@refinedev/mantine" ; import { MantineProvider , Global } from "@mantine/core" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { MantineInferencer } from "@refinedev/inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { RefineThemes . Blue } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < BrowserRouter > < Refine routerProvider = { routerProvider } dataProvider = { dataProvider ( API_URL ) } resources = { [ { name : "samples" , create : "/samples/create" , } , ] } > < Routes > < Route element = { < ThemedLayoutV2 > < Outlet /> </ ThemedLayoutV2 > } > < Route path = " /samples/create " element = { < MantineInferencer /> } /> </ Route > </ Routes > </ Refine > </ BrowserRouter > </ MantineProvider > ) ; } ;
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/mantine
.
localhost:3000/samples/edit/123
Show Code Hide Code import { Refine } from "@refinedev/core" ; import { RefineThemes , ThemedLayoutV2 } from "@refinedev/mantine" ; import { MantineProvider , Global } from "@mantine/core" ; import routerProvider from "@refinedev/react-router-v6" ; import dataProvider from "@refinedev/simple-rest" ; import { BrowserRouter , Routes , Route , Outlet } from "react-router-dom" ; import { MantineInferencer } from "@refinedev/inferencer/mantine" ; const API_URL = "https://api.fake-rest.refine.dev" ; const App : React . FC = ( ) => { return ( < MantineProvider theme = { RefineThemes . Blue } withNormalizeCSS withGlobalStyles > < Global styles = { { body : { WebkitFontSmoothing : "auto" } } } /> < BrowserRouter > < 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 = { < MantineInferencer /> } /> </ Route > </ Routes > </ Refine > </ BrowserRouter > </ MantineProvider > ) ; } ;
Example Below you'll find a Live CodeSandbox Example displaying a fully setup Refine
app with @refinedev/inferencer/mantine
components.
npm create refine-app@latest -- --example inferencer-mantine