fiori-for-react

Table of Contents

1. Description
2. Requirements
3. Download & Installation
4. Configuration
5. Known Issues
6. Support
7. Contributing
8. License

Description

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

Explore our components

You can play around with our components by visiting our Storybook.

Package Overview

@fiori-for-react/fiori3 - Fiori 3 Components

@fiori-for-react/styles - Styles

@fiori-for-react/utils - Utils

@fiori-for-react/charts - Fiori Charts

Requirements

• Node.js (version 8.5 or higher ⚠️)
• React and React-DOM (16.4.2 or higher)

Download and Installation

To consume fiori-for-react, first you need to install the npm module:

npm install @fiori-for-react/fiori3 --save

Configuration

Prerequisite: You have a React app. In case you don't, we recommend to create one using create-react-app.
In order to use fiori-for-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 { ContentDensity, ThemeProvider, Themes } from '@fiori-for-react/fiori3';
...
render() {
  return (
    <div>
      <ThemeProvider theme={Themes.sap_fiori_3} contentDensity={ContentDensity.Compact} withToastContainer>
        <MyApp />
      </ThemeProvider>
    </div>
  );
}

Then, you are ready to use fiori-for-react and you can import the desired component(s) in your app:
For example, to use Button you need to import it:

import { Button } from '@fiori-for-react/fiori3'; // loads ui5-button wrapped in a fiori-for-react component

Then, you can use the Button in your app:

<Button onPress={() => alert('Hello World!')}>Hello world!</Button>

Known Issues

Please look at our GitHub Issues .

Support

This project is provided "as-is": there is no guarantee that raised issues will be answered or addressed in future releases.

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.