UI5 Web Components for React

A wrapper implementation for React of the UI5 Web Components

Web Components React

SAP/ui5-webcomponents-react sap.github.io/ui5-webcomponents-react/@ui5/webcomponents-react

README

ui5-webcomponents-react is providing a Fiori-compliant React implementation by leveraging the UI5 Web Components.

Resources

You can find our documentation under the following links:

- Stable Release Documentation

- Next Release Documentation

- Migration Guide

Package Overview

- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/main) - Fiori 3 Components

- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/charts) - Fiori Charts

- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/base) - Utils

- [@ui5/cra-template-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template) - Template for `create-react-app`

- [@ui5/cra-template-webcomponents-react-seed](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template-seed) - Seed for `create-react-app`

Requirements

- React and React-DOM (16.14.0 or higher)

- Node.js (version 14 or higher ⚠️)

Download and Installation

To consume ui5-webcomponents-react, you need to install the npm module and required peer dependencies:

```sh
npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
```

Getting Started

Tutorial

You are new to UI5 Web Components for React and don't know where to start?

Then take a look at our Tutorial Mission at “SAP Developers”!

There you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.

In about an hour you will create a business dashboard from scratch and get familiar with some React basics in case you don't know them already.

Creating a new React app

You can create a new react app by using create-react-app with our template.

This template is installing all required dependencies for you and is setting up the App.js file for you:

```sh
npx create-react-app my-app --template @ui5/webcomponents-react
# or if you want to use yarn
yarn create react-app my-app --template @ui5/webcomponents-react
```

Creating a new React app based on our Seed

You can create a new react app by using create-react-app based on our seed.

This template delivers several out of the box components, scripts and configurations.

For more info, check the seed documentation.

```sh
npx create-react-app my-app --template @ui5/webcomponents-react-seed
npm run start
# or if you want to use yarn
yarn create react-app my-app --template @ui5/webcomponents-react-seed
yarn start
```

Add @ui5/webcomponents-react to an existing app

First of all, you need to add the @ui5/webcomponents-react dependency to your project. Please also keep in mind installing the required peer dependencies:

```sh
npm install @ui5/webcomponents @ui5/webcomponents-react @ui5/webcomponents-fiori
```

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/index.js:

``` js
import { ThemeProvider } from '@ui5/webcomponents-react';
...
const root = createRoot(document.getElementById("root"));
root.render(
<ThemeProvider>
<App />
</ThemeProvider>
);
```

Then you are ready to use `@ui5/webcomponents-react` and you can import the desired component(s) in your app:

For example, to use the Button component you need to import it:

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

Then, you can use the Button in your app:

``` js
<Button onClick={() => alert('Hello World!')}>Hello world!</Button>
```

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.

Browser Support

UI5 Web Components are supported by all major modern browsers, including their mobile versions.

Known Issues

Please look at our GitHub Issues.

How to obtain support

We welcome all comments, suggestions, questions, and bug reports. Feel free to open issues or chat with us directly in the [#webcomponents-react](https://openui5.slack.com/archives/CSQEJ2J04) channel in the

OpenUI5 Community Slack.

Please note that you have to join this Slack workspace via this link if you are not part of it already.

Contributing

Please check our Contribution Guidelines.