Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@refinedev/antd

Package Overview
Dependencies
Maintainers
6
Versions
99
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@refinedev/antd

refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.

  • 5.5.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12K
increased by13.6%
Maintainers
6
Weekly downloads
 
Created
Source




Build your React-based CRUD applications, without constraints.
An open source, headless web application framework developed with flexibility in mind.

Discord Twitter Follow

refine - 100% open source React framework to build web apps 3x faster | Product Hunt

Awesome Maintainability Test Coverage npm version npm Contributor Covenant


how-works-refine

What is refine?

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.

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 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.

Use cases

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

Key Features

⚙️ 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

Quick Start

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:

Welcome on board


Let's consume a public fake REST API and add two resources (blog_posts, categories) to our project. Replace the contents of src/App.tsx with the following code:

import { Refine } from '@refinedev/core';
import {
    notificationProvider,
    ErrorComponent,
    ThemedLayout,
} from '@refinedev/antd';
import routerProvider, { NavigateToResource } from '@refinedev/react-router-v6';
import dataProvider from '@refinedev/simple-rest';

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

import { AntdInferencer } from '@refinedev/inferencer/antd';

import '@refinedev/antd/dist/reset.css';

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
                notificationProvider={notificationProvider}
                resources={[
                    {
                        name: 'blog_posts',
                        list: '/blog-posts',
                        show: '/blog-posts/show/:id',
                        create: '/blog-posts/create',
                        edit: '/blog-posts/edit/:id',
                        meta: { canDelete: true },
                    },
                    {
                        name: 'categories',
                        list: '/categories',
                        show: '/categories/show/:id',
                    },
                ]}
            >
                <Routes>
                    <Route
                        element={
                            <ThemedLayout>
                                <Outlet />
                            </ThemedLayout>
                        }
                    >
                        <Route index element={<NavigateToResource />} />
                        <Route path="blog-posts">
                            <Route index element={<AntdInferencer />} />
                            <Route
                                path="show/:id"
                                element={<AntdInferencer />}
                            />
                            <Route path="create" element={<AntdInferencer />} />
                            <Route
                                path="edit/:id"
                                element={<AntdInferencer />}
                            />
                        </Route>
                        <Route path="categories">
                            <Route index element={<AntdInferencer />} />
                            <Route
                                path="show/:id"
                                element={<AntdInferencer />}
                            />
                        </Route>
                        <Route path="*" element={<ErrorComponent />} />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

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 blog_post & category data:

First example result


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.

Next Steps

👉 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

Roadmap

You can find refine's Public Roadmap here!

Stargazers

Stargazers repo roster for refinedev/refine

Contribution

👉 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.

Our ♥️ Contributors

License

Licensed under the MIT License, Copyright © 2021-present Refinedev

FAQs

Package last updated on 06 Apr 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc