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

@refinedev/antd

Package Overview
Dependencies
Maintainers
0
Versions
99
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@refinedev/antd

Ant Design UI support for Refine, offering enterprise-level UI components.

  • 5.45.1
  • latest
  • Source
  • npm
  • Socket score

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

Home Page | Discord | Examples | Blog | Documentation

Discord Twitter Follow

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


Refine is an open-source, headless React framework for developers building enterprise internal tools, admin panels, dashboards, B2B applications.

It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like authentication, access control, routing, networking, state management, and i18n.

Ant Design integration for Refine

Ant Design is a React.js UI library that contains easy-to-use components that are useful for building interactive user interfaces.

Refine is headless by design, offering unlimited styling and customization options. Moreover, Refine ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI for convenience.

Refine has connectors for 15+ backend services, including REST API, GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, and NestJS.

Installation

To use Refine with Ant Design, you need to install the following package @refinedev/antd along with the Ant Design packages:

npm install @refinedev/antd antd

⚡ Try Refine

Start a new project with Refine in seconds using the following command:

npm create refine-app@latest my-refine-app

Or you can create a new project on your browser:

Quick Start

Here's Refine in action, the below code is an example of a simple CRUD application using Refine + React Router + Ant Design:

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import dataProvider from "@refinedev/simple-rest";
import routerBindings from "@refinedev/react-router";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";

import "antd/dist/reset.css";

export default function App() {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerBindings}
        resources={[
          {
            name: "products",
            list: "/products",
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <ThemedLayoutV2>
                <Outlet />
              </ThemedLayoutV2>
            }
          >
            <Route path="/products">
              <Route index element={<ProductList />} />
            </Route>
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

// src/pages/products/list.tsx

import { useMany } from "@refinedev/core";
import { List, useTable, DateField } from "@refinedev/antd";
import { Table } from "antd";

const ProductList = () => {
  const { tableProps } = useTable();

  const { data: categories, isLoading } = useMany({
    resource: "categories",
    ids:
      tableProps?.dataSource
        ?.map((item) => item?.category?.id)
        .filter(Boolean) ?? [],
    queryOptions: {
      enabled: !!tableProps?.dataSource,
    },
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column
          dataIndex="category"
          title={"Category"}
          render={(value) =>
            isLoading
              ? "Loading..."
              : categories?.data?.find((item) => item.id === value?.id)?.title
          }
        />
        <Table.Column
          dataIndex="createdAt"
          title="Created At"
          render={(value) => <DateField value={value} />}
        />
      </Table>
    </List>
  );
};

The result will look like this:

Refine + Ant Design Example

Documentation

FAQs

Package last updated on 13 Dec 2024

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