Introduction to React GUI

React GUI is designed as the foundation for React design systems and component libraries. It sets you up for success in creating accessible, interactive, performant user interfaces that support the custom look and feel of your product.

Modern React #

Made with modern React APIs including function components and hooks. Ready for use with modern React APIs including Concurrent Mode and Server Components. React GUI is built upon React DOM ensuring easy adoption by existing React web design systems and applications.

The library integrates directly with the native DOM event system (i.e., it does not use React DOM’s synthetic event system); this provides excellent flexibility and performance, as well as broad compatibility with alternative renderers. Features not supported by React DOM (e.g., listening to passive events, custom events, and root events) are available in React GUI and straight-forward to use.

New to React? You can learn more about React Components and Hooks from the official React documentation at reactjs.org.

Modular views and behaviors #

React GUI exports a number of individual modules to support a variety of use cases. Your application can use as many or as few of these modules as needed. The library is designed for incremental adoption strategies.

The components for UI “primitives” do not include the event callback props you may be familiar with from React DOM. Functionality related to events, gestures, resize observation, and media queries is provided exclusively via hooks.

// React DOM element DOES have event callback props
<div onClick={onClick} />

// React GUI element DOES NOT have event callback props
const ref = usePress({ onPress });
<View ref={ref} />

This may appear cumbersome for simple cases, but provides flexibility and clarity for design systems, where you may choose to expose specific event callbacks as props in your design system’s custom components.

function Card(props) {
const { onPress, onHoverStart } = props;

// Event listeners as hooks
const pressRef = usePress({ onPress });
const hoverRef = useHover({ onHoverStart });

return <View ref={mergeRefs(pressRef,hoverRef)}>...</View>
}

Behaviors #

Hooks allow for composition without props collision. You can create custom gestures and custom combinations of behaviors, independently of the view they are later attached to. Any number of hook instances can listen to the same DOM event independently, so you don’t have to worry about merging props.

function useMagicEvent({ onMagicEvent }) {
const ref = React.useCallback((target) => {
const handleMagicEvent = function (e) {
if (onMagicEvent != null) {
onMagicEvent(e);
}
}

if (target != null) {
target.addEventListener('magic-event', handleMagicEvent);
} else {
target.removeEventListener('magic-event', handleMagicEvent);
}
}, [ onMagicEvent ]);

return ref;
};

Reliable and tested #

React GUI is thoroughly unit tested with over 90% code coverage. Pull requests record changes to the compressed file size of each module in the library.

Updated
Edit
React GUICopyright © Facebook Inc.