Inferencer
You can automatically generate views for your resources using @refinedev/inferencer
. Inferencer exports MuiListInferencer
, MuiShowInferencer
, MuiEditInferencer
, MuiCreateInferencer
components and finally the MuiInferencer
component, which combines all in one place.
Usage
Inferencer components can be imported from @refinedev/inferencer/mui
. 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.
- In
resources
prop - In Custom Components
import {
ThemedLayoutV2,
RefineThemes,
RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { MuiInferencer } from "@refinedev/inferencer/mui";
const App = () => {
return (
<BrowserRouter>
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles
styles={{ html: { WebkitFontSmoothing: "auto" } }}
/>
<RefineSnackbarProvider>
<Refine
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route
path="/samples"
element={<MuiInferencer />}
/>
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
</BrowserRouter>
);
};
import { MuiInferencer } from "@refinedev/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 @refinedev/inferencer
package, please check out Docs
Views
List
Generates a sample list view for your resources according to the API response. It uses the List
component and useDatagrid
hook from @refinedev/mui
.
Show
Generates a sample show view for your resources according to the API response. It uses Show
and field components from @refinedev/mui
with useShow
hook from @refinedev/core
.
Create
Generates a sample create view for your resources according to the first record in list API response. It uses the Create
component from @refinedev/mui
and useForm
hook from @refinedev/react-hook-form
.
Edit
Generates a sample edit view for your resources according to the API response. It uses Edit
component from @refinedev/mui
and useForm
hook from @refinedev/react-hook-form
.
Example
Below you'll find a Live CodeSandbox Example displaying a fully setup Refine
app with @refinedev/inferencer/mui
components.
npm create refine-app@latest -- --example inferencer-material-ui