React components

[tomitrescak]

I'm sorry if this is a duplicate, could not find it. But is there any plan to support React natively with React components like in rebass, material ui or bootstrap? IMHO SUI is by far the most beautiful ui framework and it deserves this nice treatment;) there are options online but they seem to be unmaintained and outdated. Thanks!

[ghost]

@tomitrescak here's a shot, but still has the jQ dependency and should be considered experimental until v1: /~https://github.com/TechnologyAdvice/stardust

[tomitrescak]

Thanks @JHabdas Looks good! I am currently using /~https://github.com/hallister/semantic-react which looks also very promising and the first release should be in about a month or month and a half.

[kvetoslavnovak]

Ant Design o React http://ant.design/docs/react/introduce /~https://github.com/ant-design/ant-design is the most adanced React UI library IMHO. The developers are from China, but the documantation is quite OK with google translator.

[jaybe78]

I have to build a prototype on reactJS and I've been looking a reactJs UI widhet library.
Material UI: looks good but not stable, too many bugs which are not getting fixed.
React-bootstrap: quite stable and takes advantage of bootstrap 3 but there's lots of missing components.
Semantic UI: looks nice but not that really integrated to reactJS yet.

I would go for SemanticUI but Ant looks quite nice. Never heard of that library before, looks like it's not really known by the majority .
@kvetoslavnovak Have you been using Ant in your app on production ? is it stable ?
Would you advise me to use it ?

[harel]

I've tried the existing semantic/react wrappers but then found its so easy to just create the components you need as you need them. With react those things are very simple to implement and doing it yourself just removes one more dependency

[as-com]

I've still found it quite difficult to create a dropdown component that doesn't screw up when I update the list of items.

[jaybe78]

@as-com you mean with semantic ui ?

[as-com]

@jaybe78 Yes

[tomitrescak]

@jhabdasI I fully agree, yet I did exactly the same as @harel and @as-is and rolled out my own set of components. I know it's the worst possible solution fragmenting the space, but none of the existing solutions was sufficient, most having major Issues with binding and others. If someone has a bit of time, he/she could review the current state and we can possibly roll out community fueled set of React components?

[IonutBajescu]

@as-com I don't see how would the dropdown component not allow you add new items to the dropdown.

Are you creating the dropdown from a select or it's just a normal dropdown?

[as-com]

@IonutBajescu I first tried to use React to create the HTML, and have the jQuery plugin add functionality, but updating the list of items screwed things up. I gave up using Semantic-UI with React because of how I would have to bypass the benefits of React and synchronize props with the jQuery plugin instance manually.

[jaybe78]

@as-com Just read an article which says that since semantic_ui is built mainly on css, javascript is optional http://www.agilityfeat.com/blog/2015/09/using-react-js-and-semantic-ui-to-create-stylish-apps

quite shameful there's no decent widgets library for react at the moment... what's the point of using react then?

[awei01]

FWIW, I've been rolling my own React stateless components. If anyone wants to use it, here it is: /~https://github.com/awei01/sui-stateless-components

[afc163]

We are working on translation and welcome you guys helping to review~

ant-design/ant-design#1471

[ghost]

/cc @levithomason @davezuko

[jlukic]

@afc163 Great work on the ant design lib, a few components, like your tree select, are particularly innovative and useful.

[levithomason]

Stardust is now the official Semantic-UI-React project. You can see this from the comments and links in both repos. This decision happened here in May.

Why do we need Stardust?

jQuery Free

We began like many, wrapping SUI components in React components. We ran into everything everyone else did:

I've still found it quite difficult to create a dropdown component that doesn't screw up when I update the list of items. — @as-com

We've rewritten the Dropdown from scratch, ~1,000 LOC with >1,000 lines of tests. Every type is supported. Full keyboard navigation included. Changing options definitely works. We also have very extensive documentation for our components. Try the Dropdown here.

We're almost completely done removing jQuery, with only form validation to finish which we've already begun internally. Track progress here.

Declarative Component APIs

We've created declarative component APIs. This does away with heavy HTML markup. It also abstracts away the painful intricacies of html markup variations. Here's some samples, checkout the doc site for more.

<Icon name='user' />
<Label text='Mail' icon='inbox' />
<Progress indicating percent={33} color='blue' />
<Grid columns={5} />
<Grid columns='equal'>

// ...plus some addons
<Select options={[...]} />
<Radio type='slider' label='Make my profile visible' />

Auto Controlled Components

Wiring up React component change handlers and props is a pain, especially in large forms and apps. Our stateful components self manage their state out of the box, without wiring. This means a Dropdown will open when you click it, without wiring onClick to the open prop. The value is also stored internally, without wiring onChange to value.

If however, you add a value prop or an open prop, then the dropdown intelligently delegates control for that one prop from it's self managed state to your prop value. The other props remain auto controlled. You can mix and match any number of controlled and uncontrolled props. You can also add/remove control at any time by adding/removing props. Everything just works.

We did this using our AutoControlledComponent util, which of course is fully tested.

Powerful Props

Most component markup use cases can be handled with intelligent props that configure the component markup for you:

const panels = _.times(3, () => ({
  title: faker.lorem.sentence(),
  content: faker.lorem.paragraphs(),
}))

<Accordion panels={panels} />

<Message
  icon='inbox'
  header='Have you heard about our mailing list?'
  content='Get the best news in your e-mail every day.'
/>

Subcomponents

If you need full control for adding more advanced props to the markup yourself, then you can use sub components to do that:

<Accordion>
  <Accordion.Title>
    <Icon name='dropdown' />
    What is a dog?
  </Accordion.Title>
  <Accordion.Content>
    <p>...</p>
  </Accordion.Content>
</Accordion>

<Message>
  <Icon name='notched circle' loading />
  <Message.Content>
    <Message.Header>Just one second</Message.Header>
    We are fetching that content for you.
  </Message.Content>
</Message>

Quality

I know it's the worst possible solution fragmenting the space, but none of the existing solutions was sufficient, most having major Issues with binding and others — @tomitrescak

Exactly. We hear this and felt the same way. We are certainly solving the quality issue as this is 100% within our control. We're doing our best to pull the fragmented efforts together. We've reached out to many other libraries, authors, and maintainers along our way. This was done to incorporate the best ideas, direct users to a single library, and even obtain the package name semantic-ui-react from @aldanor.

I'd like to comment specifically on quality. We've been using Stardust in production at @TechnologyAdvice and will continue to do so. We're building something we want to use, and we want to use solid libraries. Libraries that make us and our users happy. This is not a half-hearted effort. We're not looking for a quick fix that lacks. It also is not going to be soon abandoned. It is not one of those projects that will look great and get you 70% only to realize it lacks everything it promised.

I don't think that is quality and we're not going to do that. We have some road ahead of us yet and there are still changes being made for the better. We've been at this almost a year now and we'll certainly finish strong. Even though the library is usable today, our v1 will be well worth the wait it has been.

Community & Industry Support

Stardust is the fastest growing most actively maintained Semantic UI React project there is. It has a full time team backing it @TechnologyAdvice, plus the support of the community. It was also selected as the official SUI React project by @jlukic.

We've taken care to incorporate the best ideas and patterns we could find from all SUI React projects. We have no ego or shame in changing things to ensure we have the best library there is. It is our goal to pull all the disparate efforts in the community into one community project. This project is the accumulation of all that have gone before us, and the best solutions of all those efforts.

We're somewhere around 85-90% through our v1 release. I close issues/PRs and make releases almost everyday, see the CHANGELOG.md.

We have a very complete guide to CONTRIBUTING.md if you'd like to help. See the README.md for more information on where you can jump in.

Cheers!

---

P.S. @JHabdas thanks for the ping, obviously there have been major improvements and updates since this thread started 😉