@pankod/refine-core
Advanced tools
refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.
refine is a React-based framework for the rapid ✨ development of web applications. It eliminates repetitive tasks demanded by CRUD operations and provides industry standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.
refine is headless by design, thereby offering unlimited styling and customization options.
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 UI components and business logic, so that they never keep you from customizing your UI or coding your own flow.
refine seamlessly works with any custom design or UI framework that you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI.
refine shines on data-intensive⚡ applications like admin panels, dashboards and internal tools. Thanks to the built-in SSR support, refine can also power customer-facing applications like storefronts.
You can take a look at some live examples that can be built using refine from scratch:
👉 Refer to most popular real use case examples
👉 More refine powered different usage scenarios can be found here
⚙️ Zero-config, one-minute setup with a single CLI command
🔌 Connectors for 15+ backend services including REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase, and Directus.
🌐 SSR support with Next.js or Remix
🔍 Auto-generated CRUD UIs from your API data structure
⚛ Perfect state management & mutations with React Query
🔀 Advanced routing with any router library of your choice
🔐 Providers for seamless authentication and access control flows
⚡ Out-of-the-box support for live / real-time applications
📄 Easy audit logs & document versioning
💬 Support for any i18n framework
💪 Future-proof, robust architecture
⌛️ Built-in CLI with time-saving features
✅ Full test coverage
The fastest way to get started with refine is by using the create refine-app project starter tool.
Run the following command to create a new refine project configured with Ant Design System as the default UI framework:
npm create refine-app@latest -- --preset refine-antd
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 } from "@pankod/refine-core";
import {
Layout,
ReadyPage,
notificationProvider,
ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import { AntdInferencer } from "@pankod/refine-inferencer/antd";
import "@pankod/refine-antd/dist/reset.css";
const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
Layout={Layout}
ReadyPage={ReadyPage}
notificationProvider={notificationProvider}
catchAll={<ErrorComponent />}
resources={[
{
name: "posts",
list: AntdInferencer,
show: AntdInferencer,
create: AntdInferencer,
edit: AntdInferencer,
canDelete: true,
},
{
name: "categories",
list: AntdInferencer,
show: AntdInferencer,
},
]}
/>
);
};
export default App;
🚀 Thanks to refine Inferencer package, it guesses the configuration to use for the list, show, create, and edit pages based on the data fetched from the API and generates the pages automatically.
Now, you should see the output as a table populated with post & category data:
You can get the auto-generated pages codes by clicking the Show Code button on each page. Afterward, simply pass the pages to the resources array by replacing with the Inferencer components.
👉 Jump to Tutorial to continue your work and turn the example into a full-blown CRUD application.
👉 Visit Learn the Basics Page to get informed about the fundamental concepts.
👉 Read more on Advanced Tutorials for different usage scenarios.
👉 See the real-life Finefoods Demo project.
👉 Play with interactive Examples
You can find refine's Public Roadmap here!
👉 Refer to contribution docs for more information
If you have any doubts related to the project or want to discuss something, then join our Discord Server.
Licensed under the MIT License, Copyright © 2021-present Refinedev
v3.97.0
Features
@pankod/refine-core packageSwizzleable components:
@pankod/refine-inferencer package@pankod/refine-inferencer is a package that provides a way to automatically generate views for resources based on the data structure.0767d7a07a7 Thanks @yildirayunlu! - Added the useInfiniteList hook 🥳. This hook is a modified version of react-query's useInfiniteQuery used for retrieving items from a resource with pagination, sort, and filter configurations.
#3324 9bfb34749bc Thanks @aliemir! - Added the ability to pass mutation options to useMutation hooks in mutation hooks:
useCreate (data)useUpdate (data)useDelete (data)useDeleteMany (data)useUpdateMany (data)useCreateMany (data)useCustomMutation (data)useLogin (auth)useLogout (auth)useRegister (auth)useForgotPassword (auth)useUpdatePassword (auth)useForm (form)#3442 8f2954611fa Thanks @salihozdemir! - Added swizzle support for @pankod/refine-core package.
Swizzleable components:
AuthenticatedCanAccessErrorPageLoginLogoutRegisterForgotPasswordUpdatePassword#3140 102bfbf3283 Thanks @aliemir! - - Bumped Next.js to 13
appDir option in next.config.js to allow for the latest Next.js features.pages directoryCurrent support for pages directory has not changed and will continue to work as before. It will be supported as long as Next.js continues to support and prompts it as the stable way of working with Next.js.
appDir optionappDir option is a new experimental feature in Next.js that introduces a bunch of new features. It is currently in beta and is not stable. It is not recommended to use it in production. But can be used alongside the current pages directory support.
To use appDir option, you need to add it to your next.config.js file.
// next.config.js
module.exports = {
/* ... */
experimental: {
appDir: true,
},
};
appDir with RefineWe've needed to make some changes to the @pankod/refine-nextjs-router to make it work with the current structure of the app directory feature. To make sure these do not break the current support for pages directory, we've added a new exports at the sub path @pankod/refine-nextjs-router/app that can be used with the appDir option.
Note
To make optional catch-all routes to work with the app directory, you need to define them as directories unlike the option of defining them as files with pages directory.
You need to use NextRouteComponent from @pankod/refine-nextjs-router/app instead of NextRouteComponent from @pankod/refine-nextjs-router when using appDir option.
Inside your layout file, you need to bind params to routerProvider to make sure @pankod/refine-nextjs-router can work properly with the new structure.
// app/[[...refine]]/layout.tsx
"use client";
import routerProvider from "@pankod/refine-nextjs-router/app";
const Layout = ({ children, params }) => {
return (
<Refine
routerProvider={routerProvider.apply({ params })}
/* ... */
>
{children}
</Refine>
);
};
Warning
Please note that, unlike the routerProvider from the @pankod/refine-nextjs-router, routerProvider from @pankod/refine-nextjs-router/app is a function and you need to bind params to make it work properly.
// app/[[...refine]]/page.tsx
"use client";
import { NextRouteComponent } from "@pankod/refine-nextjs-router/app";
export default NextRouteComponent;
Warning
You need to add "use client"; directive to both layout.tsx and page.tsx inside app/[[...refine]] directory.
Warning
checkAuthentication does not work with appDir. We're aiming to release a substitute for it using middleware but for now its not included in this release.
ea74f3a8408 Thanks @sevkioruc! - Fix useList, useCustom and useCustomMutation hooks i18n issue in the error messages.96d93eb2d71 Thanks @salihozdemir! - Made the auth provider's usePermissions method optional.ea74f3a8408 Thanks @sevkioruc! - Fix useList, useCustom and useCustomMutation hooks i18n issue in the error messages.96d93eb2d71 Thanks @salihozdemir! - Made the auth provider's usePermissions method optional.9bfb34749bc Thanks @aliemir! - Added the ability to pass mutation options to useMutation hooks in mutation hooks:
useFormuseStepsFormuseModalFormuseDrawerForm@pankod/refine-codemod package handles the breaking changes for your project automatically, without any manual steps. It migrates your @pankod/refine-antd version from 3.x.x to 4.x.x.
Just cd into root folder of your project (where package.json is contained) and run this command:
npx @pankod/refine-codemod antd4-to-antd5
And it's done. Now your project uses @pankod/refine-antd@4.x.x.
FAQs
refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.
The npm package @pankod/refine-core receives a total of 722 weekly downloads. As such, @pankod/refine-core popularity was classified as not popular.
We found that @pankod/refine-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.