Live data from Hacker News

Show HN: Antd – A set of high-quality React components

ant.design

61–70 of 107 posts

Re: Show HN: Antd – A set of high-quality React components

#61

Earlier quoted context omitted.

The minified version is about 1MB, see https://unpkg.com/antd@2.5.0/dist/ . But you can import component individually by using this babel plugin https://github.com/ant-design/babel-plugin-import , see https://ant.design/docs/react/getting-started#Import-on-Dema...

This is really well executed, well done. I noticed a link to data visualization and graphics pages, but unfortunately I don't read chinese. Are there plans to wrap that stuff up in React in a similar fashion?

You can try Google translator..

Re: Show HN: Antd – A set of high-quality React components

#62
post #37

Earlier quoted context omitted.

Theming is on of the big reasons we saw the need to make styled-components[0] (new lib to style React apps and component libraries) I'm one of the maintainers of ElementalUI, and Glen Maddern, the styled-components co-creator, one of the creators of CSS Modules. One of the biggest downsides of CSS Modules (and, by extension, every other styles in JavaScript library right now) is that theming is simply impossible. Bui…

Hello! I've been using Antd components for the last year in some my project. All components are also available here[0] as single modules for better reusability and customization. Currently, I have solved all my theming goals with Plain CSS. For each component, that I'd like to customize I created a wrapper import Slider from 'rc-slider'; function StyledSlider(props) { return } Then in CSS .my-slider .rc-slider-track…

We're currently writing some documentation specifically pertaining to theming third-party component libraries, which you can read the WIP of here: https://github.com/styled-components/styled-components-exper...

The TL;DR is that this customization guide will suddenly become really easy. Antd can specify a default theme and users can override the parts of the default theme they want!

All the user has to do is pass a single prop to the ThemeProvier and override what they want:

    import { ThemeProvider } from 'antd';

    
      
    
On top of that different parts of your app can have different themes. Making your sidebar dark but your main component light is not an issue – just wrap them in two ThemeProviders with different themes:

    
      
    
    
      
    
It's also all dynamic, meaning you can let the users of your app provide custom themes for your app and it'll automatically apply.

Compare that with the current customization guide, not only do users have to use webpack, they also have to use specific plugins just to make customization of third-party components work! It's also all global, which means styling the sidebar dark and the main area light is impossible since it's all just Less variables applied at build time. This also makes it very hard to have user supplied themes.

Does that make it clear enough how using styled-components would help with theming? :-)

Re: Show HN: Antd – A set of high-quality React components

#63
post #58

Earlier quoted context omitted.

We're working hard on mobile version[1]. [1] https://mobile.ant.design

Will it be a separate library?

Yep, it's a separate library but also follows Ant Design's guideline, provide both web (for mobile) and ReactNative version.

Re: Show HN: Antd – A set of high-quality React components

#65
post #28

Earlier quoted context omitted.

Blueprint is meant for desktop applications. For example, Electron apps. You'll notice Blueprint tries to give that desktop app feel, versus Antd, which does not.

It isn't, according to their own words[0], they've never used Blueprint in an Electron (or other desktop) app. [0] https://github.com/palantir/blueprint/issues/202#issuecommen...

I believe they meant desktop-feel as opposed to mobile first (mostly because some consider Material to be a mobile-first decision). Additional Note: Blueprint doesn't go out of it's way to degrade nicely for mobile screen sizes for most components and doesn't provide the grid layout or progressive embeds typically associated with mobile-friendly UI libraries.

Re: Show HN: Antd – A set of high-quality React components

#66
post #25

It's so beautiful! Please please make something like this for react native too.

We're working hard on mobile version[1]. [1] https://mobile.ant.design

Thanks!! I did open the link but it was in Chinese. I will use this exclusively when it's released.

Re: Show HN: Antd – A set of high-quality React components

#67
post #61

Earlier quoted context omitted.

This is really well executed, well done. I noticed a link to data visualization and graphics pages, but unfortunately I don't read chinese. Are there plans to wrap that stuff up in React in a similar fashion?

You can try Google translator..

github:https://github.com/antvis/g2 guide: https://github.com/antvis/g2/wiki/How-to-create-a--chart api: https://github.com/antvis/g2/wiki/API

Re: Show HN: Antd – A set of high-quality React components

#68

I don't want to be that guy, and probably will be downvoted for being negative, but why does everything load so slow? People on this thread are saying it's the network speed thing, coming from china and all, but isn't this supposed to have downloaded all the js modules initially? I just keep thinking "it would have been much faster and I wouldn't have to wait for these progress bars to finish if it were just a static…

The minified version of this library is about 1MB but loading individual modules is possible. I haven't checked my own net tab but I presume the site uses chunking in order to avoid downloading the entire library on the initial load.

The data is static and it is probably a SPA, but it's not all loaded on the initial load.

Re: Show HN: Antd – A set of high-quality React components

#69

For those wondering who it comes from, https://ant.design/docs/spec/introduce#Who-are-using-Ant-Des... The first (and presumably namesake) company is Ant Financial https://www.antgroup.com , which is described as: > Ant Financial Services Group ("Ant Financial"), was officially founded in October 2014 and originated from Alipay which is the world's leading third-party payment platform founded in 2004. So basically if…

Alibaba is also working on a ReactNative competitor for Vue, called Weex: https://alibaba.github.io/weex/

Re: Show HN: Antd – A set of high-quality React components

#70
This stuff is horrible to use from the keyboard visually, because outlines have been removed without an adequate replacement. Please fix the styles for :focus et al. Make it all obvious, like Microsoft have done in Windows 10 (they have what is pretty much just a 2px solid black outline).
Post reply on HN