Skip to content

Latest commit

 

History

History
193 lines (141 loc) · 7.69 KB

Welcome.mdx

File metadata and controls

193 lines (141 loc) · 7.69 KB

import { Footer, TableOfContent } from '@sb/components'; import { Meta } from '@storybook/blocks'; import { Link, MessageStrip } from '@ui5/webcomponents-react'; import { VersionTable } from '@sb/components/VersionTable';

UI5 Web Components for React

Open Github Project

UI5 Web Components for React is a Fiori compliant React library built on top of the UI5 Web Components. With the help of UI5 Web Components for React, you can use UI5 Web Components as if they were native React components. In addition to that, UI5 Web Components for React is providing complex components and layouts on top of the UI5 Web Components.

Requirements

Ongoing Support for Version 1.x

We will continue to support version 1.x until end of June 2025, focusing on bug fixes to ensure continuity for our existing users.

V1 Release Documentation

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.

Examples & Templates

You can find a curated list of project templates and examples on our Project Templates & Examples page.

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:

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

<MessageStrip hideCloseButton children={ <> Please note that if a @ui5/webcomponents or @ui5/webcomponents-fiori version doesn't start with a patch-version of 0 (e.g. ~1.10.3), only the specified version is supported and the previous patch-versions will most likely not work with @ui5/webcomponents-react. </> } />

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>

Theming

UI5 Web Components and UI5 Web Components for React are both coming with the sap_fiori_3 a.k.a. Quartz and sap_horizon Theme families built in.

<MessageStrip hideCloseButton children={ <> UI5 Web Components for React uses the theme configuration of UI5 Web Components. Please also have a look at their{' '} documentation. </> } />

In case you want to change your applications' theme, you have to import a couple of modules:

import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
import '@ui5/webcomponents-react/dist/Assets';

You can now change the Theme by calling setTheme with a string parameter of the new theme.
Available Themes:

  • sap_horizon (default)

  • sap_horizon_dark

  • sap_horizon_hcb

  • sap_horizon_hcw

  • sap_fiori_3

  • sap_fiori_3_dark

  • sap_fiori_3_hcb

  • sap_fiori_3_hcw

Configure Compact/Cozy setting

UI5 Web Components supports Compact and Cozy mode. It is set to Cozy by default. To enable Compact, provide the css class ui5-content-density-compact to any of your HTML elements and it apply compact size to all of its children.

<body class="ui5-content-density-compact">
  ...
</body>

TypeScript

UI5 Web Components for React supports TypeScript, therefore we also provide type interfaces for event parameters, public methods of ui5-webcomponents, and more.

You can find all available interfaces of the main package here and for charts here.

Example

Small app with a popover opened by clicking a button including type declarations:

import { useState, useRef } from 'react';
import type { ButtonPropTypes, PopoverDomRef, PopoverPropTypes } from '@ui5/webcomponents-react';
import { ThemeProvider, Button, Popover } from '@ui5/webcomponents-react';

export default function App() {
  const [open, setOpen] = useState<PopoverPropTypes['open']>(false);
  const popoverRef = useRef<PopoverDomRef>(null);

  const handleClick: ButtonPropTypes['onClick'] = (e) => {
    setOpen(true);
  };
  const handleAfterClose: PopoverPropTypes['onClose'] = (e) => {
    setOpen(false);
  };

  return (
    <ThemeProvider>
      <Button id="opener" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover ref={popoverRef} opener="opener" open={open} onClose={handleAfterClose}>
        Content
      </Popover>
    </ThemeProvider>
  );
}

Feature Registration

@ui5/webcomponents offers a variety of feature (side-effect) imports that are available with @ui5/webcomponents-react as well. To use them you have to make sure they are imported before any other imports!

Support

Feel free to open issues or ask 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.