Antd 2.0 released in English - the best React components library 👍


#21

Update: uniforms-antd is ready and will be published tomorrow!


#22

What is the upside to uniforms over the naive form features in antd?


#23

You can render the form from a schema definition with Autoform, thus the schema definition and UI setup has one source in some projects. Making it much more generic and maintainable.


#24

Could we use any component of antd such as DatePicker, TreeSelect, ...


#25

Yes. I would recommend working through the uniforms documentation. Custom field components can be implemented in various ways, such as customautofield or simpleschema-definition. Thus you can build a field component and connect it to the form through the schema definition.


#26

Thanks! I’m using their native Form package. I’m wondering about the cost/benefit of each option. I do use simple schema, so it could work for me.


#27

Thanks @mrmsupport, could you create simple admin template repo like antd-admin template (Meteor + Antd + Uniform).
Thanks for your helping.


#28

Is antd better than bootstrap? If so, how?

I am using bootstrap right now.


#29

It have many component such as: select, tree select, date time picker, smart table ...


#30

Has anyone been able to get postcss working while using antd and meteor? How are you setting it up?

meteor remove standard-minifier-css

meteor add juliancwirko:postcss

my .less files are in client folder and I pull in antd styles into the top of the less file like so:

@import '{}/node_modules/antd/dist/antd.less';

then package.json

{
  "name": "app name",
  "version": "1.0.0",
  "description": "app name",
  "scripts": {
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "chimp": "^0.34.1",
    "eslint": "^2.9.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-jsx-a11y": "^1.2.0",
    "eslint-plugin-meteor": "^3.5.2",
    "eslint-plugin-react": "^5.1.1",
    "faker": "^3.1.0",
    "postcss-less": "^0.15.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "safari 8",
          "safari 5",
          "ie 8",
          "ie 9",
          "opera 12.1",
          "ios 6",
          "android 4"
        ]
      }
    },
    "parser": "postcss-less"
  },
  "eslintConfig": {
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "plugins": [
      "meteor",
      "react"
    ],
    "extends": [
      "airbnb/base",
      "plugin:meteor/guide",
      "plugin:react/recommended"
    ],
    "globals": {
      "server": false,
      "browser": false,
      "expect": false
    },
    "rules": {
      "import/no-unresolved": 0,
      "no-underscore-dangle": [
        "error",
        {
          "allow": [
            "_id",
            "_ensureIndex",
            "_verifyEmailToken",
            "_resetPasswordToken",
            "_name"
          ]
        }
      ]
    }
  },
  "dependencies": {
    "antd": "^2.6.4",
    "aphrodite": "^1.0.0",
    "autoprefixer": "^6.7.2",
    "bcrypt": "^0.8.7",
    "body-parser": "^1.16.0",
    "eslint": "^2.13.1",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2",
    "griddle-react": "^0.7.1",
    "indexof": "0.0.1",
    "meteor-node-stubs": "^0.2.4",
    "payment": "^1.0.4",
    "react": "^15.4.1",
    "react-addons-pure-render-mixin": "^15.0.2",
    "react-addons-update": "^15.4.2",
    "react-burger-menu": "^1.10.10",
    "react-credit-card": "^0.20.0",
    "react-dom": "^15.2.0",
    "react-fontawesome": "^1.5.0",
    "react-html-email": "^1.1.3",
    "react-komposer": "^1.8.0",
    "react-router": "^2.5.2",
    "react-share": "^1.11.0",
    "react-social-icons": "^2.5.1",
    "react-stripe-checkout": "^2.2.5",
    "react-tap-event-plugin": "^2.0.1",
    "stripe": "^4.14.0"
  }
}

#31

antd just has almost every component you need, so no more hitting npm looking for a bootstrap-react version of XYZ component. Antds grid is a lot like boostrap, but has flexbox helpers. It has a pretty solid Form function (no need to rely on a formsy package) I think the styles are a lot better for antd (kind of a dropbox feel). Lastly, they have a ton of examples in the docs and each component has a bunch of options to it.

And I think they’re backed by antd financial (could be wrong). Bootstrap react seems to rely on good will PRs. There’s another boostrap 4 react repo that seems to be gaining popularity too, so who knows which will win out.

I really hope they get better english support for their react-native library.


#32

Thanks for clarifying.

I am working on a social network site. I hope it suits my projects need.


#33

I think you’ll be happier using antd over bootstrap no matter what you build. antd has everything bootstrap has plus some.


#34

Unfortunately the Semantic theme version of Antd is very lacking to be something useful. :frowning2:


#35

I’m just now trying out Ant Design, and can’t get it working with Meteor. I have the following .babelrc:

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "plugins": [
    "babel-root-slash-import",
    ["import", {
      "libraryName": "antd",
      "style": "css"
    }]
  ]
}

And the following page:

import React from 'react';
import { Input } from 'antd';

const Home = () => {
  return <div>
    <h1>Home.</h1>
    <div>
      <Input placeholder="Whatever" />
    </div>
  </div>
};

export default Home;

I still get the browser warning:

You are using a whole package of antd,
please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

And the input rendered on the page is just the plain old HTML input. What am I missing here? Even changing the import to this:

import Input from 'antd/lib/input';

doesn’t work. The browser warning is gone, but the input is still definitely not Ant Design’s.


#36

Getting the same here. Also, the console shows this additional error:

Also, your typings definitions are definitely not the way they should be - did you actually test those if they actually worked with TypeScript? Because currently they don’t.


#37

You might find the answers you need in this demo : Meteor Uniforms demo

The code is on github : https://github.com/vazco/uniforms/tree/master/demo

( Disclaimer – I haven’t tried “Antd” myself, yet. )


#38

did you meteor npm install indexof?

I currently am not using babel with this. I just do

import { Button } from 'antd;

I did come across this:

https://www.npmjs.com/package/babel-plugin-antd-meteor


#39

Good links:


#40

No. Because there’s no such package I’d like to install.