ui5-webcomponents-react
is providing a Fiori-compliant React implementation by leveraging the UI5 Web Components.
You can find our documentation under the following links:
-
@ui5/webcomponents-react - Fiori 3 Components
-
@ui5/webcomponents-react-charts - Fiori Charts
-
@ui5/webcomponents-react-base - Utils
- React and React-DOM (16.14.0 or higher)
- Node.js (LTS version)
- If you're using TypeScript we recommend version 4.7 or later.
To consume ui5-webcomponents-react
, you need to install the npm module and required peer dependencies:
npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
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.
You can find a curated list of project templates on our Project Templates page.
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:
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
:
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:
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:
<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.
UI5 Web Components are supported by all major modern browsers, including their mobile versions.
Please look at our GitHub Issues.
We welcome all comments, suggestions, questions, and bug reports. Feel free to open issues or chat with us directly in the #webcomponents-react
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.
Please check our Contribution Guidelines.