We’re starting to move away from Semantic UI for our React-based frontend. Semantic was really helpful for us at first, but as our product has evolved we have found that we are spending more time fighting it’s limitations than we’d like.
Part of the issue is that the site we’re building is a creativity app that doesn’t always follow the industry-standard conventions of how particular widgets should behave. An example is our drop-down menus: Semantic UI requires that a drop-down have at least one menu item in it, otherwise the drop-down will not display. But this doesn’t work if the drop down is purely informational, or has other kinds of widgets within it. (This is just one example, there are others but I won’t go into them now.)
What we’ve found is that for sites like ours which have their own unique look, there’s not as much value in adopting a widget library that has its own opinions about the visual style. Where we’ve found better value is in “white-label” npm packages like react-overlay which provides the basic mechanics of modal dialogs but leaves the styling and transitions up to you. And react-overlay seems to have much better accessibility support than Semantic, since it handles focus trapping and other w3c recommended practices.
One thing I’m having trouble locating is a good white label package for dropdown menus. There are several of them out there, but they don’t meet the requirements that we have:
- React-friendly
- Allow lazy rendering (i.e. defer rendering the components until actual drop-down time).
- Content-neutral, i.e. can handle any kind of content in the drop-down.
- Flexible about positioning (e.g. align to bottom right of this widget), and can also be used as a right-click context menu.
- Relatively bug-free (dropdowns in particular tend to be plagued by positioning bugs - menus getting cut off, or positioning incorrectly, especially if scrolling regions are involved.)
- Good keyboard navigation support.
- Allow us to completely override the theme.
If anyone has suggestions I’d be interested in hearing what they are.