UI5 Web Components for React
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
.
Resources
You can find our documentation under the following links:
Migration Guide
Migrating your app from v0.8.X
to v0.9.0
requires a few updates. You can find the most important changes and how to adapt your code to migrate to v0.9.0
in our Migration Guide.
Package Overview
-
@ui5/webcomponents-react - Fiori 3 Components
-
@ui5/webcomponents-react-charts - Fiori Charts
-
@ui5/webcomponents-react-base - Utils
-
@ui5/cra-template-webcomponents-react - Template for
create-react-app
Requirements
Download and Installation
To consume ui5-webcomponents-react
, first you need to install the npm module:
npm install @ui5/webcomponents-react --save
Configuration
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:
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
@ui5/webcomponents-react
to an existing app
Add 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 --save
# if you want to use the ShellBar or the ProductSwitcher component, you also need to install this package as well
npm install @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/App.js
:
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
...
render() {
return (
<div>
<ThemeProvider>
<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 the Button
component 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 onClick={() => alert('Hello World!')}>Hello world!</Button>
You can also import all components from @ui5/webcomponents-react
directly.
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/webcomponents-react
is supporting all modern major browsers. There is no support for Internet Explorer 11 built in.
If you want your application to run in IE11, you will have to polyfill some features by importing these polyfills as first imports in your src/index.js
:
import 'react-app-polyfill/ie11';
import '@ui5/webcomponents-base/dist/features/browsersupport/IE11';
import '@ui5/webcomponents-react-base/polyfill/IE11';
import '@webcomponents/webcomponentsjs/webcomponents-bundle';
You can install react-app-polyfill
and @webcomponents/webcomponentsjs
with the following command:
npm install react-app-polyfill @webcomponents/webcomponentsjs --save
Known Issues
Please look at our GitHub Issues .
Support
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.
Contributing
Please check our Contribution Guidelines.
License
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.