Installation
An overview of how to install and use React GUI.
Add React GUI to an existing React web app.
npm install react-gui
Now the package is ready to use with no additional setup.
import { View } from 'react-gui/view';
No specific integration with build processes or configuring of CSS pre-processors is required.
Dependencies #
The import paths documented for the react-gui
package rely on Node.js package entry points, which is available in Node.js 12.15 and above. Make sure your bundler also supports this Node API (e.g., webpack@>=5
).
node --version
The interaction Hooks work best with apps rendered using React DOM’s createRoot
API, which is curently available only in the experimental builds. This is optional but ensures correct behavior when multiple instances of the same Hook are used on the same element.
npm install react@experimental react-dom@experimental
Also works with Preact.
What to expect #
The React GUI package exports “Components”, “APIs”, and “Hooks”. Each exported module can be used in isolation or together with other modules to implement React-based design systems, product component libraries, and custom applications. Modules are imported using package subpaths.
import { View } from 'react-gui/view';
Components are developed in the standard React way, with styles being defined in JavaScript and behaviors attached using Hooks.
import { StyleSheet } from 'react-gui/style-sheet';
import { Text } from 'react-gui/text';
import { View } from 'react-gui/view';
import { useFocus } from 'react-gui/use-focus';
function ReactGUIButton(props) {
const [focused, onFocusChange] = useState(false);
// Attach behavior
const ref = useFocus({
onFocus: props.onFocus,
onFocusChange
});
// Define render tree
return (
<View
focusable
ref={ref}
style={[
styles.root,
focused && styles.focused
]}
>
<Text>{props.children}</Text>
</View>
);
}
// Define styles
const styles = StyleSheet.create({
root: { /* ... */ },
focused: { /* ... */ }
});
React GUI code can be used alongside existing React DOM components, allowing for incremental adoption.
import ReactGUIButton from '../components/gui-button';
import ReactDOMButton from '../components/dom-button';
function Card(props) {
return (
<div>
<ReactGUIButton>Submit</ReactGUIButton>
<ReactDOMButton>Close</ReactDOMButton>
</div>
);
}
React GUI code can be bundled using any existing JavaScript web bundler.