Ignite UI for React - What’s New in 22.1

Over the last 5 months, we have been hard at work trying to complete 15 new components to include in the Ignite UI for React product for today's 22.1 release. Unfortunately, we couldn't quite get there with the 100% confidence we like to have when we release a new version of our products. Instead of waiting or holding back the release, we have decided to release all 15 new React components as a Preview.

If they aren't 100% ready, why release them now? If you have been following my career here at Infragistics for the last 10 years, you know that I don’t like to keep things from my community.  I want your honest and candid feedback, and the best way to get that is to give you what we have now.  Not tomorrow, not next week, not next month, but now.  I wanted to get these components in your hands as soon as possible, because waiting sucks.  We have some loose ends to tie up before we can call these new React components RTM, but don’t let that “Preview” term fool you.  These components are ready to be thrown into the fire and pushed to their limits.

Wondering what these 15 new React controls are? Well, let's find out.

React Avatar

The Ignite UI for React Avatar component helps adding initials, images, or material icons to your application.

React Badge

The Ignite UI for React Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

React Button

The Ignite UI for React Button directive is intended to turn any button, span, div, or anchor element into a fully functional button.

React Calendar

The Ignite UI for React Calendar component provides an easy and intuitive ways to display date information. Users can choose from three different selection modes - single selection, multi selection or range selection.

React Card

The Ignite UI for React Card component displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information.

React Checkbox

The Ignite UI for React Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox.

React Icon

The Ignite UI for React Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup.

React Input

The Ignite UI for React Input is used to create single-line or multi-line text elements. They help to cover common scenarios when dealing with form inputs.

React List

The List component is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. The Ignite UI for React List component displays rows of items and supports one or more header items. Each list item is completely templatable and will support any valid HTML.

React Navigation Bar

The Ignite UI for React Navigation Bar component informs the user of their current position in an app and helps them move back (much like the “back” button in a browser). The Navigation Bar can also provide links to quick actions such as search or favorite, helping users navigate smoothly through an application without trying to move to invalid routes or states. The bar sits at the top of the container it is placed in.

React Navigation Drawer

The Ignite UI for React Navigation Drawer component is a side navigation container. It can rest above content and slide in/out of view or be pinned to expand/collapse within the content. A mini version provides quick access to navigation even when closed. The Navigation Drawer features responsive mode selection and touch gestures. Content is completely customizable and can make use of default menu item styling.

React Radio and Radio Group

The Ignite UI for React Radio Button and Radio Group components allow the user to select a single option from an available set of options that are listed side by side.

React Ripple

The Ignite UI for React Ripple component creates an animation in response to a touch or a mouse click.

React Switch

The Ignite UI for React Switch component functions like a checkbox but explicitly represents boolean on and off states. Clicking the Switch component will toggle the value of the component from an “on” state (boolean true)  to an “off” state (boolean false).

Let’s Wrap this Baby Up!

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our GitHub repo. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos.  Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.