We searched high and low for some of the coolest React components out there to help you create a top-notch interface. Here are some of our favorites:
UI-Router for React provides state-based routing for apps. For example, rather than creating a traditional website, this component makes it easy to navigate through various states of a React application with each “page” having its own content. As the user navigates, the app changes the browser’s URL – allowing users to bookmark specific pages. The result is an application that is easy to navigate and ultra-quick.
Looking to use Google’s Material Design in conjunction with React? Material-UI is a set of React components that will do just that. You’ll find a wide array of useful components like App Bars, Auto Complete, Badges, Buttons, Cards, Dialog Boxes, Icons, Menus, Sliders and more that are written in React – but using Material Design principles.
With Gatsby.js, you’ll be able to build static websites using React. The library allows you to pull in data from various sources like your favorite CMS, API, database or even a file system. Sites can be generated through the command line or other “starter” packages to help speed along the process.
styled-components allows you to style React components using real CSS code. It removes the mapping between components and styling, which makes the entire process much more straightforward.
Using React Sketch.app enables the creation of reusable documents that use React components within Sketch. It was built by Airbnb to help manage their design system and allows for the use of real React components in your designs. This is a really powerful tool that helps you build better prototypes.
React Virtualized helps render long-scrolling lists and tables in an attractive and highly-customizable fashion. Set a fixed or dynamic row height, allow users to scroll to specific rows and display placeholders as scrolling takes place.
Blueprint is a UI kit that includes a collection of React components covering common interface elements. These are the basic elements that every application needs – like buttons, icons and various navigation systems. Styling is done through Sass, so you’ll be able to customize elements as desired. The components have also been created with accessibility in mind and will work with keyboard navigation.
Recharts is a charting library that allows you to quickly build charts with reusable React components. It’s built using SVG elements, so it scales beautifully on any device. Virtually any type of chart is possible, including various forms of line, bar, pie and scatter charts.
With React DnD, you can create complex drag-and-drop interfaces using React components. Data can be transferred based on drag-and-drop events and components can change their look based upon their state. You can highlight specific targets for events to help make a friendlier UI.
The Future of UI?
React and other similar libraries are indeed looking like the future of both web and native app UI. In fact, it’s been heavily talked about with regards to its use in WordPress (like the Calypso app). The ability to create single-page apps that, ahem, react instantly to user interaction may someday soon become the standard.
We encourage you to take a look at React and the tools highlighted above. Experiment with them and see how they might fit into your own design future.