Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SAP/ui5-webcomponents-react
A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://github.com/SAP/ui5-webcomponents-react
open-source react typescript ui-components web-components
Last synced: 3 months ago
JSON representation
A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
- Host: GitHub
- URL: https://github.com/SAP/ui5-webcomponents-react
- Owner: SAP
- License: apache-2.0
- Created: 2019-04-18T12:38:30.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T09:03:23.000Z (6 months ago)
- Last Synced: 2024-05-23T09:10:14.141Z (6 months ago)
- Topics: open-source, react, typescript, ui-components, web-components
- Language: TypeScript
- Homepage: https://sap.github.io/ui5-webcomponents-react/
- Size: 1.56 GB
- Stars: 419
- Watchers: 16
- Forks: 92
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents).
## Resources
You can find our documentation under the following links:
- [Stable Release Documentation](https://sap.github.io/ui5-webcomponents-react/)
- [Nightly Release Documentation](https://sap.github.io/ui5-webcomponents-react/nightly/)
## Package Overview
- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/main) - Fiori 3 Components
[](https://www.npmjs.com/package/@ui5/webcomponents-react)
[](https://bundlephobia.com/result?p=@ui5/webcomponents-react)
- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/charts) - Fiori Charts
[](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
[](https://bundlephobia.com/result?p=@ui5/webcomponents-react-charts)
- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/base) - Utils
[](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
[](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)
## Requirements
- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**18.0.0 or higher**)
- [Node.js](https://nodejs.org/) (**LTS version**)
- If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
## 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](https://developers.sap.com/mission.react-spa.html) 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.
### SAP Devtoberfest 2023 session
[Here](https://www.youtube.com/watch?v=zyOxgjoSnGw) you can find the video of our session for the SAP Devtoberfest 2023 (aired Sep 29, 2023). There we briefly explain why UI5 Web Components for React exist at all, where the project fits into the SAP UI stack and what advantages our wrapper has over implementations that use pure ui5-webcomponents.
For the main part, we show how you could create a simple Movie Database UI, first by using our `Vite` template and then with our `Next.js` template.
### Examples & Templates
You can find a curated list of project templates and examples on our [Project Templates & Examples page](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/project-templates-examples--docs).
### 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`:
```jsx
import { ThemeProvider } from '@ui5/webcomponents-react';
...
const root = createRoot(document.getElementById("root"));
root.render(
);
```
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:
```jsx
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:
```jsx
alert('Hello World!')}>Hello world!
```
For Browser Support and the configuration of the UI5 Web Components, please take a look at the
[Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
[Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
[UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
### Browser Support
UI5 Web Components are supported by all major modern browsers, including their mobile versions.
## Known Issues
Please look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues).
## How to obtain support
We welcome all comments, suggestions, questions, and bug reports. Feel free to [open issues](https://github.com/SAP/ui5-webcomponents-react/issues/new/choose) or chat with us directly in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel in the
[OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
Please note that you have to join this Slack workspace via [this link](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/) if you are not part of it already.
## Contributing
Please check our [Contribution Guidelines](/CONTRIBUTING.md).