Update: uniforms-antd is ready and will be published tomorrow!
3 Likes
What is the upside to uniforms over the naive form features in antd?
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.
1 Like
Could we use any component of antd such as DatePicker, TreeSelect, ...
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.
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.
Thanks @mrmsupport, could you create simple admin template repo like antd-admin template (Meteor + Antd + Uniform).
Thanks for your helping.
Is antd better than bootstrap? If so, how?
I am using bootstrap right now.
It have many component such as: select, tree select, date time picker, smart table ...
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"
}
}
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.
1 Like
Thanks for clarifying.
I am working on a social network site. I hope it suits my projects need.
I think you’ll be happier using antd over bootstrap no matter what you build. antd has everything bootstrap has plus some.
1 Like
Unfortunately the Semantic theme version of Antd is very lacking to be something useful. 
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.
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.
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. )
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:
Good links:
No. Because there’s no such package I’d like to install.