Open source, headless web application framework developed with flexibility in mind.
What is refine?
refine is a React-based framework for the rapid
refine is headless by design offering unlimited styling and customization options.
What do you mean by "headless" ?
Instead of being a limited set of pre-styled components, refine is a collection of helper hooks
, components
and providers
. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.
refine seamlessly works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, and Mantine.
Use cases
refine shines on data-intensive applications like admin panels, dashboards and internal tools. Thanks to built-in SSR support, refine can also power customer-facing applications like storefronts.
Key Features
🔀 Advanced routing with any router library of your choice
⚡ Out-of-the-box support for live / real-time applications
💬 Support for any i18n framework
💪 Future-proof, robust architecture
Quick Start
The fastest way to get started with refine is using the superplate project starter tool. Run the following command to create a new refine project configured with Ant Design System as the default UI framework:
npx superplate-cli --preset refine-antd my-project
Once the setup is complete, navigate to the project folder and start your project with:
npm run dev
Your refine application will be accessible at http://localhost:3000:
Let's consume a public
fake REST API
and add two resources (posts, categories) to our project. Replace the contents of src/App.tsx
with the following code:
import { Refine, useMany } from "@pankod/refine-core";
import {
useTable,
List,
Table,
DateField,
Layout,
ReadyPage,
notificationProvider,
ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import "@pankod/refine-antd/dist/styles.min.css";
const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[{ name: "posts", list: PostList }]}
Layout={Layout}
ReadyPage={ReadyPage}
notificationProvider={notificationProvider}
catchAll={<ErrorComponent />}
/>
);
};
export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();
const categoryIds =
tableProps?.dataSource?.map((item) => item.category.id) ?? [];
const { data, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});
return (
<List>
<Table<IPost> {...tableProps} rowKey="id">
<Table.Column dataIndex="title" title="title" />
<Table.Column
dataIndex={["category", "id"]}
title="category"
render={(value: number) => {
if (isLoading) {
return "loading...";
}
return data?.data.find(
(item: ICategory) => item.id === value,
)?.title;
}}
/>
<Table.Column
dataIndex="createdAt"
title="createdAt"
render={(value) => <DateField format="LLL" value={value} />}
/>
</Table>
</List>
);
};
export default App;
interface IPost {
title: string;
createdAt: string;
category: { id: number };
}
interface ICategory {
id: number;
title: string;
}
Now, you should see the output as a table populated with post
& category
data:
Next Steps
👉 See the real-life Finefoods Demo project.
Roadmap
You can find refine's Public Roadmap here!
Stargazers
Contribution
If you have a bug to report, do not hesitate to file an issue.
If you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.
License
Licensed under the MIT License, Copyright © 2021-present Pankod