antd-extended

Features

• Uses dayjs instead of moment for all date-related pickers
• Adds several new sizes x-small, x-large and xx-large to most components
• Adds a new secondary type for buttons
• Adds new utc and startOf options to date-related pickers
• Adds new isBefore and isAfter options to the <TimePicker />
• Adds a new <Checkbox.Button /> component to bring button styles to checkboxes

Docs

• Storybook

Install

npm install @mgcrea/antd-extended

Quickstart

import React from 'react';
import {Button} from '@mgcrea/antd-extended';
import '@mgcrea/antd-extended/lib/esm/index.css'; // optional

function App() {
  const {
    register,
    handleSubmit,
    formState: {errors},
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <div>
      <Button size="x-small">X-Small</Button>
      <Button type="secondary" size="x-large">
        X-Large
      </Button>
    </div>
  );
}

Dynamic style import configuration

Like the original antd package, @mgcrea/antd-extended ships with .less styles that you may want to import in your app.

Babel plugin

Using babel-plugin-import:

// babel.config.js
plugins: [
  ['import', {libraryName: '@mgcrea/antd-extended', libraryDirectory: 'lib/esm', style: (name) => { return [`antd/es/${name}/style/index.less`, `@mgcrea/antd-extended/lib/esm/${name}/style/index.less`]; }}, '@mgcrea/antd-extended'],
],

Vite plugin

Using vitePluginImp:

// vite.config.js
plugins: [
  vitePluginImp({
    libList: [
      {
        libName: '@mgcrea/antd-extended',
        replaceOldImport: false,
        style: (name) => {
          return [`antd/es/${name}/style/index.less`, `@mgcrea/antd-extended/lib/esm/${name}/style/index.less`];
        },
      },
    ],
  }),
],