I’m about to embark on a practice app using ant. I was wondering if anyone has tried it? Any gotchas or show stoppers?
Frankly, it is maintained by folks in China and I’m from the USA-- so I’m concerned about the 35% tariff if I use it.
2 Likes
Not sure what the 35% tariff is referring to?
However, I’ve been using antd in production for the last 3 months and I’m really happy with it. My project was based on bootstrap and a combination of npm react modules before switching to antd and I was debugging styling issues on every feature I built. Antd helped me to reduce the number of these individual dependencies to a single library, which I think is essentially what one wants form a UI library. And now I hardly ever spend time debugging styling issues - must say switching over was very easy.
The language barrier is something that you should consider. However I found that using google translate mostly solves this for me.
The library itself I found is very stable and well maintained and the documentation is easy to use. Having a bit of trouble changing the color schemes but found a hack around that for now. Other than that I can’t find any issues with it. They are also continuously improving and adding new features for it.
One of the main reasons I choose antd was due to table components which I find very flexible and useful since I’m building various flexible table structure in my project.
I use uniforms to compile my webforms trough simple schema which saved me a great amount of time in my project. So I wrote a antd style package for uniforms, and in the process of integrating it into the uniforms library. https://github.com/vazco/uniforms/pull/134
1 Like
I switch to Ant design a month ago, and it was amazing !
A lot of components who are very customizable.
And the devs are pretty cool !
1 Like
Forms were the thing I’m trying to figure out. uniforms is not outputting forms with antd components though correct? That seems like the only downside (as all the antd form components are pretty nice).
I found this fomrsy version but it doesn’t look well maintained (and I couldn’t get it working, although I didn’t try hard):
"you’re going to go to github, and you’re going to use javascript frameworks built in china, and then you’re going to put those apps across our border with no tax? I’m going to get consensus from congress and I’m going to tax your app 35%. " - DJT
It looks awesome! It is just nice to have almost any component you could image, all in one framework. It beats trying to find a material-ui version or bootstrap-react version for every little component.
Ant use all react-component http://react-component.github.io/badgeboard/
They are solid component, so Ant is very solid 
At this moment, I open only one issue for a feature request.
It save me a lot of works !
I use the forms from Ant, and it’s very good 
WTF ?
JKs JKs JKs JKs JKs JKs JKs
I was wondering if you could use individual components instead of installing the whole antd library. So rc-[component name] are all the individual npm packages?
Yeah, you can use only the component by installing it.
But with ant, you have a good wrapper 
I’m having some trouble getting setState to work with form.create()
const NormalLoginForm = Form.create()(React.createClass({
getInitialState () {
return {
loading: false
};
},
handleSubmit(e) {
e.preventDefault();
console.log(this.state.loading)
this.setState({loading: true}, function(){
console.log(this.state.loading)
});
this.props.form.validateFields((err, values) => {
if (!err) {
setTimeout(function(){
console.log('Received values of form: ', values);
let email = values.emailAddress;
let password = values.password;
handleLogin(email, password);
},3000)
}
this.setState({loading: false})
});
},
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
{getFieldDecorator('emailAddress', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input addonBefore={<Icon type="user" />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>
)}
<a style={{float: 'right'}}>Forgot password</a>
<Button loading={this.state.loading} type="primary" htmlType="submit" className={css(styles.loginButton)}>
Log in
</Button>
Or <Link to='/signup'>register now!</Link>
</FormItem>
</Form>
);
},
}));
You don’t say what your trouble is, but if you expect that code to show a loading indicator for 3 sec you need to move the this.setState({loading: false}) that is last in the validateFields callback inside the timeout.
Now it will show the loading indicator for the few milliseconds it takes to do the validation. If the component even re-renders during that process, I’m not sure…
1 Like
BTW, let me just say I like antd a lot too. Forms are awesome. Upload button is very nice. The only component that sucks a little is the calendar, which is pretty much useless for anything more complex than a date picker. Which antd already has one…
Good news is it’s pretty easy to throw BigCalendar into antd, so with that the widget set is pretty much complete as far as my requirements go.
Also check out the (recently arrived in 2.5.3) instructions on how to config an ejected create-react-app to dynamically modify the theme using variables in the webpack config.
2 Likes
Yeah I’m about to look into changing colors/fonts in the theme… I’m hoping it is similar to material-ui
Very simple. The defaults are here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
and then in your webpack config you go:
{
test: /\.less$/,
loader: 'style!css!postcss!less?{modifyVars:{"@font-size-base":"14px","@screen-sm": "480px"}}'
},
…for example.
Thanks man. The downside is I’ll have to research how to work with webpack and meteor… currently not touching webpack in anyof my meteor projects
…oh. Guess I forgot about that. I’m not using Meteor 
But actually, this is a Less thing, in my case just config’ed via webpack. I guess you can get a Meteor/Less combo set up to do the same thing.
1 Like
Thanks for the heads up. Didn’t know about it before. Currently using semantic ui but ant looks rather slick
Is it responsive? How do you compare it to react-bootstrap ?
Ant uses the grid system of bootstrap in the background