react ui

React UI

Development of React UI is largely supported by RACOM—one of the leading global players in wireless Critical Infrastructure.

Quick Start Guide

To install React UI in your app:

1. Install react-ui with npm. Make sure you also have prop-types, react and react-dom installed.

   npm install --save @react-ui-org/react-ui

2. Load the Titillium Web font:

   <link
     href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap"
     rel="stylesheet"
   />

3. Load React UI CSS in your app:

   import '@react-ui-org/react-ui/dist/react-ui.css';

4. Import and use any of React UI components in your app:

   import { Button } from '@react-ui-org/react-ui';
   
   <Button label="My Button" />

Head to the docs to see how to use, customize, and extend React UI.

Development Mode

It is possible to run React UI in your app in development mode. This is useful because:

• In production mode React UI uses non-human-readable class names.
• Runtime check (i.e. PropTypes) are suppressed in production mode.

To enable development mode, add the following code to the webpack.config.js file in your app:

module.exports = (env, argv) => ({
  resolve: {
    alias: {
      // Allow to run react-ui in development mode for easier development.
      '@react-ui-org/react-ui$': argv.mode === 'production'
        ? '@react-ui-org/react-ui/dist/react-ui.js'
        : '@react-ui-org/react-ui/dist/react-ui.development.js',
      '@react-ui-org/react-ui/dist/react-ui.css': modeArgument === 'production'
        ? '@react-ui-org/react-ui/dist/react-ui.css'
        : '@react-ui-org/react-ui/dist/react-ui.development.css',
    },
  },
});

Then run webpack with the --mode=production or --mode=development flag.

Contributing

We appreciate any contributions you might make.

Please check out our Contributing Guide. It includes contribution guidelines and information on how to run and develop the project.