UI5 Web Components for React

Description

ui5-webcomponents-react is providing a Fiori-compliant React implementation by leveraging the UI5 Web Components. This project was formerly known as fiori-for-react.

Explore our components

You can play around with our components by visiting our Storybook.

Package Overview

@ui5/webcomponents-react - Fiori 3 Components

@ui5/webcomponents-react-charts - Fiori Charts

@ui5/webcomponents-react-base - Utils

Requirements

Node.js (version 8.5 or higher ⚠️)
React and React-DOM (16.8.0 or higher)

Download and Installation

To consume ui5-webcomponents-react, first you need to install the npm module:

npm install @ui5/webcomponents-react --save

Configuration

Prerequisite: You have a React app. In case you don't, we recommend to create one using create-react-app.
In order to use ui5-webcomponents-react you have to wrap your application's root component into the ThemeProvider.
You will find this component most likely in src/App.js:

import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
...
render() {
  return (
    <div>
      <ThemeProvider withToastContainer>
        <MyApp />
      </ThemeProvider>
    </div>
  );
}

Then, you are ready to use ui5-webcomponents-react and you can import the desired component(s) in your app:
For example, to use Button you need to import it:

import { Button } from '@ui5/webcomponents-react/lib/Button'; // loads ui5-button wrapped in a ui5-webcomponents-react component

Then, you can use the Button in your app:

<Button onPress={() => alert('Hello World!')}>Hello world!</Button>

You could import all components also from @ui5/webcomponents-react directly, but this will have a negative impact on your bundle size.

For Browser Support and the configuration of the UI5 Web Components, please take a look at the Browser Support and the Configure sections of the UI5 Web Components Readme.

Improving Bundle Size

If you are running a default create-react-app, you will have will huge bundle size after creating a production build. This is caused by the fact that the webpack bundler is including all UI5 Web Component translation files and CLDR data files in the application bundle. In order to decrease the bundle size of the application a custom Webpack configuration should be provided.

Eject the react build with npm run eject
Open config/webpack.config.js file and add the following lines before the last loader:

{
  test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/],
  loader: 'file-loader',
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
  type: 'javascript/auto'
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.

Please also refer to the UI5 Web Components React Sample.

Known Issues

Please look at our GitHub Issues .

Support

This project is provided "as-is": there is no guarantee that raised issues will be answered or addressed in future releases.

Contributing

Please check our Contribution Guidelines.

jessiKo/ui5-webcomponents-react