Inferencer
You can automatically generate views for your resources using @refinedev/inferencer
. Inferencer exports ChakraUIListInferencer
, ChakraUIShowInferencer
, ChakraUIEditInferencer
, ChakraUICreateInferencer
components and finally the ChakraUIInferencer
component, which combines all in one place.
Usage
Inferencer components can be imported from @refinedev/inferencer/chakra-ui
. 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 { Layout, refineTheme } from "@refinedev/chakra-ui";
import { ChakraProvider } from "@chakra-ui/react";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { ChakraUIInferencer } from "@refinedev/inferencer/chakra-ui";
const App = () => {
return (
<ChakraProvider theme={refineTheme}>
<BrowserRouter>
<Refine
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route
path="/samples"
element={<ChakraUIInferencer />}
/>
</Routes>
</Refine>
</BrowserRouter>
</ChakraProvider>
);
};
import { ChakraUIInferencer } from "@refinedev/inferencer/chakra-ui";
const SampleList = () => {
return (
<ChakraUIInferencer resource="samples" action="list" />
);
};
const SampleShow = () => {
return (
<ChakraUIInferencer resource="samples" action="show" id="1" />
);
};
const SampleCreate = () => {
return (
<ChakraUIInferencer resource="samples" action="create" />
);
};
const SampleEdit = () => {
return (
<ChakraUIInferencer 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 from @refinedev/chakra-ui
and useTable
hook from @refinedev/react-table
.
Show
Generates a sample show view for your resources according to the API response. It uses the Show
and field
components from @refinedev/chakra-ui
with the 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/chakra-ui
and the useForm
hook from @refinedev/react-hook-form
.
Edit
Generates a sample edit view for your resources according to the API response. It uses the Edit
component from @refinedev/chakra-ui
and the useForm
hook from @refinedev/react-hook-form
.
Example
Below, you will find a Live CodeSandbox Example displaying a fully setup Refine
app with the @refinedev/inferencer/chakra-ui
components.
npm create refine-app@latest -- --example inferencer-chakra-ui