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