Namely, Pickled Meatballs

npm

Need private packages and team management tools?Check out npm Orgs. »

@ant-design/compatible

0.0.1-alpha.7 • Public • Published

Ant Design Compatible

NPM version NPM downloads

Install

yarn add @ant-design/compatible

Introduction

Helps you to compatible different components between v3 and v4.

Follow Component are provided compatible version:

  • Form
  • Icon
  • Mention

Form

Form of v3 api is different with v4:

// V3
import { Form, Input, Button } from 'antd';
 
class MyForm extends React.Component {
  render() {
    const { form } = this.props
    return (
      <Form>
        {form.getFieldDecorator('username')(
          <Input />,
        )}
        <Button>Submit</Button>
      </Form>
    );
  }
}
 
export default Form.create()(MyForm);

Change to:

// V4 with compatible
import { Form as LegacyForm } from '@ant-design/compatible';
import { Input, Button } from 'antd';
import '@ant-design/compatible/assets/index.css';
 
class MyForm extends React.Component {
  render() {
    const { form } = this.props
    return (
      <LegacyForm>
        {form.getFieldDecorator('username')(
          <Input />,
        )}
        <Button>Submit</Button>
      </LegacyForm>
    );
  }
}
 
export default Form.create()(MyForm);

Icon

Just import Icon from package @ant-design/compatible and the reset is almost same as before.

// V3
import { Icon, Button } from 'antd';
 
class MyIconList extends React.Component {
  render() {
    return (
      <div className="icons-list">
        <Button>hello button</Button>
        <Icon type="home" />
        <Icon type="setting" theme="filled" />
        <Icon type="smile" theme="outlined" />
        <Icon type="sync" spin />
        <Icon type="smile" rotate={180} />
        <Icon type="loading" />
      </div>
    );
  }
}
 
export default MyIconList;

Change to:

// V4 with compatible
import { Icon as LegacyIcon } from '@ant-design/compatible';
 
class MyIconList extends React.Component {
  render() {
    return (
      <div className="icons-list">
        <Button>hello button</Button>
        <LegacyIcon type="home" />
        <LegacyIcon type="setting" theme="filled" />
        <LegacyIcon type="smile" theme="outlined" />
        <LegacyIcon type="sync" spin />
        <LegacyIcon type="smile" rotate={180} />
        <LegacyIcon type="loading" />
      </div>
    );
  }
}
 
export default MyIconList;

Mention

The legacy usage in v3

import { Mention } from 'antd';
 
const { toString } = Mention;
 
ReactDOM.render(
  <Mention
    style={{ width: '100%' }}
    onChange={onChange}
    defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    onSelect={onSelect}
    placement="top"
  />,
  mountNode,
);

Compatible usage in v4

import { Mention } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
 
const { toString } = Mention;
 
ReactDOM.render(
  <Mention
    style={{ width: '100%' }}
    onChange={onChange}
    defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    onSelect={onSelect}
    placement="top"
  />,
  mountNode,
);

install

npm i @ant-design/compatible

Downloadsweekly downloads

1,056

version

0.0.1-alpha.7

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability