User Experience Design with React

User Experience Design with React

featured UX user experience design

One of the greatest yet most cumbersome things about react is the plethora of user experience libraries, tools, utilities, and framework built for React app development. There is something for pretty much anything you could possibly think of. This is an amazing selling point if you’re just getting into react (it was for me!), but it can also become quickly overwhelming.

I have been using a multitude of different tools in my react development, and yet I still feel like I have barely even scratched the surface of what is available. This is largely due to the fact that the interfaces for the project I’ve been developing is highly custom. From a visual standpoint, there isn’t much “out of the box” that I can use. When it comes to tools that enhance the development experience though, I’ve put together quite an arsenal. We’ll get into that later though. For now I wanted to focus on the stuff that I have not had a chance to work with in a development environment yet.  By doing so, I’ll be able to see what kind of innovations other people are coming up with in their reusable UI kit creations and report these findings back to you.

User Experience & UI Kits

I have separated my research into 3 categories: user experience, developer tools, and architecture. I will primarily focus on UX here. As an aside, I ended up spending so much time going through different React UX libraries and frameworks and importing so many projects from github in conducting research for this that I ended up removing a lot of the libraries that I was going to initially include and chose only to focus on the ones I felt were really worth talking about, so keep that in mind if you notice that there are some popular libraries that are missing from this list.

Material-UImaterial-ui user experience logo

This was probably my favorite out of all the UX kits I reviewed. This library sent me down the rabbit hole for hours. Put simply, this kit is absolutely badass. After downloading the code and messing with the example projects and then spending an hour and a half ogling over the apps listed in the showcase section that use Material-UI, I ended up npm installing it for use in the project that I’m currently lead developer on. I’ll probably end up replacing some of my custom components that I built specifically for this project with components in this library.

Benefits of Building with Material UI

So why am I smitten over this library? Probably because I’m a big fan of the UX of Google’s material design specifications and the familiarity is has with users, so bringing UI elements that feel familiar to a web experience has a lot of value. The implementation of these components is spot-on. The animations are smooth, responsive, and fast, and nearly identical to their Android counterparts. They’re also extremely easy to work with and the documentation is solid. A lot of attention has been paid to optimizing these components for speed as well, which is evident in this discussion thread and their decision to migrate away from the usual method of defining styles inline on components. This is because overriding with the inline style method results in poor performance due to the fact that the styles must be recomputed on every render.

It is also worth noting that this project has been in development for almost as long as React and is expected to have its full release of version 1.0 very soon. Point being, it is very robust and extensively tested compared to a lot of the alternatives. I would strongly encourage you to check out the Admin-on-Rest framework, which was built using Material-UI for examples on how this library can be even further extended into yet another library that targets a specific niche. The possibilities are truly endless.

Material-UI Website    |   Material-UI Project on Github 

BelleReact Belle user experience logo

This was actually the first of the libraries that I reviewed because it seemed like an easy one to start with because it is pretty small. This library of UI components claim to be “optimized for both web and mobile.” I honestly didn’t think much of this statement at first. I mean, a toggle is a toggle, right? After all, its not that hard to have it accept both touch and click events. It seemed like this was a pretty rudimentary set of basic UI components: the usual boring old button, checkbox, text input, combo box, etc. Nevertheless, I didn’t want to be too quick to judge because a lot of the time that is how you find the neatest stuff, when you take a look behind the curtain so to speak.

Highly Responsive User Experience

After spending some time with the code, what I found was that the developers took a pretty solid approach when creating the behavior of the UI components. There’s a few things I really like about this library. First, the developers took the time to incorporate all types of input. For example, the toggle switch will accept touch swipe, touch press, mouse click, mouse slide, and arrow keys. The behavior of the component is also responsive based on the type of input. For example, you can slowly slide your finger on the toggle and it will follow your finger rather than immediately flip the switch to the other side like the touch or click or key press will. It would have been a lot easier to just hook into that same functionality as the other events, but that isn’t what is done here.

I can appreciate what the developers have done with this component kit particularly because I have to support every type of desktop and mobile interaction in my current project, and writing code that provides responsive animation that is specific to the type of user input really goes a long way when it comes to enhancing the user experience.

Potential Pitfalls

Styling is a bit unique and may not suit everyone. All custom styling is done with javascript by overwriting the built-in styling. For example: = { [styles] }, as opposed to using inline styles. You can also use Object.assign() or underscores’ _.extend() method to change individual styles on the object.  The library is also pretty bare right now, but there looks to be a lot more for it on the horizon.

React Belle Web Site     |     Belle Project on Github

GrommetGrommet user experience logo

Grommet is a more than just a react component library.  It is a comprehensive set of material design specifications and philosophies geared toward an enhanced “mobile-first” user experience. I rather enjoyed the Learn section of the web site for the information on providing an optimal user experience. The things that are discussed in the Best Practices, Mobile, and Navigation sections gave me some ideas to implement into my apps. I should really point out that personally, I’m not a fan of their design specifications at all. For example, font color is way to light for comfortable reading, the font size in their specs is often too small, and the color pallette makes too heavy use of pastels.

Working with the Component Set

The component set is pretty complete and the essentials are most certainly all there. There’s even some additional goodies like charting. Aside from the visualization components and some of the icons though, the feedback animations of most of the controls is far from ideal, especially for a framework that is supposed to be mobile-first. Those little things make a huge difference, like the drop-down list fading in when selected instead of abruptly appearing. In all fairness, an Animate wrapper is provided in the Utils folder that you can use to add transitions, but I just think those things should ship as standard. Perhaps I got spoiled by the Material-UI library that I reviewed earlier.

Lastly, I noticed that the APIs of the components seemed a bit sparse compared to some of the other libraries, which made me wonder how customizable the components were in comparison. Unfortunately I didn’t have as much time to spend with this one as it was starting to get pretty late when I reviewed it.

Overall, I think this would be a good library to use for building a mobile-ready dashboard. A lot of the utilities and components are data-centric, and you could always extend them if you had to using prototypal inheritance. All I could find in the showcase were a few general purpose web sites though, which I found to be strange.

Grommet Web Site     |     Grommet Project on Github

React Toolbox user experience logoReact-Toolbox

React-Toolbox is a bit similar in terms of UX to the Material-UI library. This is because it also implements Google’s material design specification. The API documentation section of the web site has a built-in code playground and usage examples for every component, making it easy to integrate into your project. The code playground is useful for seeing if a particular component will do what you need it to or what it will look like once you’ve customized it to fit your needs first before you decide to import the library into your workspace.

As I began looking through the APIs and working with the components, I immediately took notice to the extensive amount of customization options that are exposed for each component. I like the way this library handles style customization most of all. It makes use of CSS modules, which is basically a CSS file that scopes all class and animation names locally. They are written as regular CSS but compile to a low-level format called Interoperable CSS (ICSS). The CSS module is passed in using the theme property of the component and each component uses a documented className API.

Style Customization with CSS Modules

To customize the styling of the component, you just declare the predefined class names in the CSS module for that component, which will be locally scoped to only that component. In other words, you are essentially overriding CSS selectors that have already been injected into the component. The only real problem with this is that you have to continuously dig through the default theme.css files in order to find out what the default selectors are. You also need to be aware of instances where the priority of the default property rule may be higher, in which case you have to boost the priority to the same level as the original.

The CSS customization capabilities are quite extensive using this methodology once you get the hang of it though. For example, using the built in wrapper, you can declare a different theme at different points in the DOM tree, and have that theme applied to all of its children, unless and until another ThemeProvider is declared, at which point that theme would take over.

There is also a couple of utilities – CSS Module Values and modules-values-extract – that together will allow you to declare CSS module variables in component-specific theme files. I know this may sound confusing, but I used this react-toolbox-example to gain a better understanding for how all this works.

React-Toolbox Web Site     |     React-Toolbox Project on Github

React-BootstrapReact Bootstrap user experience logo

React-Bootstrap is a reimplementation of Bootstrap’s javascript  using React. This is necessary because Bootstrap’s javascript uses JQuery, which does direct DOM manipulation and would therefore not play nicely with React (to say the least).

For styling, components that have predefined style types have you declare a bsStyle prop, like an alert for example, would have you set bsStyle={"warning"}. Most of the components have default styles set, which you can overwrite using the bsClass property though.

This library might be worth trying out for the sake of familiarity since most web developers are quite familiar with bootstrap. It may be more trouble than it’s worth though, as deprecations and breaking changes are expected prior to the 1.0.0 release.

React Bootstrap Web Site     |     React Bootstrap Project on Github

semantic ui user experience logoSemantic UI React

This is probably the most extensive general UI application development library. Semantic-UI is a library that was originally built using JQuery. As we know, JQuery is not compatible with React though, because JQuery is a DOM manipulation library and the last think we need is JQuery fighting with React over who gets control over the DOM.

Semantic UI is a framework for app development that uses powerful design pattern concepts like component augmentation, subcomponents, and auto-controlled components. The stateful Semantic-UI components self-manage their state without having to wire up props to them. In other words, they just work. Even the value is stored internally without having to declare an onChange listener that is wired up to the selected value. Not only is there a pretty massive list of components that are available in this library, but the APIs for them are quite complete, making these components greatly customizable. I certainly plan on diving deeper into this library when I have a chance and potentially using it for some app development.

Semantic UI React Web Site     |     Semantic UI Project on Github


These are just a few of the component libraries for React that are available. There’s more frameworks that I really wanted to tap into and review as well, including Mosaik, UI-Kitten, and especially Onsen UI, but there’s only so much time in the day. Perhaps I will make a another part to this that continues this adventure in React UX before I get into the tools that are available for the development experience with React. I really wish I had the kind of time to review all of what is available but the React ecosystem is evolving at such an exponential rate that it is nearly impossible to stay on top of all of the tools that are available. For that I must refer you to a fairly exhaustive awesome-react-components collection of components and libraries on github. Also check out this react catalog web app that taps into the github api, cataloging all react projects on github that can be filtered by category or keyword.


Leave a Reply

Your email address will not be published.