Skip to content

Commit ed0944e

Browse files
committed
docs: add reuse badge
[ci skip]
1 parent d972f08 commit ed0944e

File tree

1 file changed

+39
-13
lines changed

1 file changed

+39
-13
lines changed

README.md

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<a name="top"></a>
2+
23
<p align="center">
34
<img src="https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/master/assets/Logo.png" alt="UI5 Web Components for React Logo" />
45
</p>
@@ -21,66 +22,78 @@
2122
<a href="https://lernajs.io/" target="_blank">
2223
<img alt="lerna" src="https://badgen.net/badge/maintained%20with/lerna?color=purple">
2324
</a>
25+
<a href="https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-react" target="_blank">
26+
<img alt="REUSE Status" src="https://api.reuse.software/badge/github.com/SAP/ui5-webcomponents-react"/>
27+
</a>
2428
</p>
2529

26-
`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents).
30+
`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents).
2731
This project was formerly known as `fiori-for-react`.
2832

2933
## Resources
3034

3135
You can find our documentation under the following links:
36+
3237
- [Stable Release Documentation](https://sap.github.io/ui5-webcomponents-react/)
3338
- [Next Release Documentation](https://sap.github.io/ui5-webcomponents-react/master/)
3439

3540
## Migration Guide
41+
3642
Each new major version of this project might contain breaking changes which require you to change coding in your project.
3743
In order to help you with those tasks, we have prepared a [Migration Guide](https://sap.github.io/ui5-webcomponents-react/master/?path=/docs/migration-guide--page).
3844

39-
4045
## Package Overview
4146

4247
- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/main) - Fiori 3 Components<br/>
4348
[![](https://badgen.net/npm/v/@ui5/webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react)
4449
[![](https://badgen.net/npm/v/@ui5/webcomponents-react/next?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react)
4550
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react)](https://bundlephobia.com/result?p=@ui5/webcomponents-react)
46-
51+
4752
- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/charts) - Fiori Charts<br />
48-
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
53+
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
4954
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts/next?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
5055
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react-charts)](https://bundlephobia.com/result?p=@ui5/webcomponents-react-charts)
51-
56+
5257
- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base) - Utils<br />
5358
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-base?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
5459
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-base/next?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
5560
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react-base)](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)
56-
61+
5762
- [@ui5/cra-template-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/cra-template) - Template for `create-react-app` <br/>
5863
[![](https://badgen.net/npm/v/@ui5/cra-template-webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react)
5964

6065
<!-- *********************************************************************** -->
66+
6167
<a name="requirements"></a>
68+
6269
## Requirements
6370

6471
- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**16.8.0 or higher**)
6572
- [Node.js](https://nodejs.org/) (**version 12 or higher** ⚠️)
6673

6774
<!-- *********************************************************************** -->
75+
6876
<a name="download"></a>
77+
6978
## Download and Installation
7079

7180
To consume `ui5-webcomponents-react`, first you need to install the npm module:
81+
7282
```sh
7383
npm install @ui5/webcomponents-react --save
7484
```
7585

7686
<!-- *********************************************************************** -->
87+
7788
<a name="configuration"></a>
89+
7890
## Configuration
7991

8092
### Creating a new React app
8193

8294
You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
8395
This template is installing all required dependencies for you and is setting up the `App.js` file for you:
96+
8497
```sh
8598
npx create-react-app my-app --template @ui5/webcomponents-react
8699
# or if you want to use yarn
@@ -90,14 +103,16 @@ yarn create react-app my-app --template @ui5/webcomponents-react
90103
### Add `@ui5/webcomponents-react` to an existing app
91104

92105
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:
106+
93107
```sh
94108
npm install @ui5/webcomponents @ui5/webcomponents-react --save
95109
# if you want to use the ShellBar or the ProductSwitcher component, you also need to install this package as well
96110
npm install @ui5/webcomponents-fiori
97111
```
98112

99113
In order to use `@ui5/webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
100-
You will find this component most likely in `src/App.js`:
114+
You will find this component most likely in `src/App.js`:
115+
101116
```jsx
102117
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
103118
...
@@ -127,43 +142,54 @@ Then, you can use the Button in your app:
127142

128143
You can also import all components from `@ui5/webcomponents-react` directly.
129144

130-
For Browser Support and the configuration of the UI5 Web Components, please take a look at the
131-
[Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
132-
[Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
133-
[UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
145+
For Browser Support and the configuration of the UI5 Web Components, please take a look at the
146+
[Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
147+
[Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
148+
[UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
134149

135150
### Browser Support
136151

137152
#### Internet Explorer 11
153+
138154
`@ui5/webcomponents-react` is supporting all modern major browsers. There is no support for Internet Explorer 11 built in.<br />
139155
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`:
156+
140157
```js
141158
import 'react-app-polyfill/ie11';
142159
import '@ui5/webcomponents-base/dist/features/browsersupport/IE11WithWebComponentsPolyfill';
143160
import '@ui5/webcomponents-react-base/polyfill/IE11';
144161
```
162+
145163
You can install `react-app-polyfill` with the following command:
164+
146165
```bash
147166
npm install react-app-polyfill --save
148167
```
168+
149169
In case you are using [`browserslist`](https://github.com/browserslist/browserslist) (which is part of `create-react-app`), please also make sure you have added `IE 11` to your browserslist configuration (can be found in `package.json` if you are using CRA).
150170

151171
<!-- *********************************************************************** -->
172+
152173
<a name="issues"></a>
174+
153175
## Known Issues
154176

155177
Please look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues) .
156178

157179
<!-- *********************************************************************** -->
180+
158181
<a name="support"></a>
182+
159183
## Support
160184

161-
We welcome all comments, suggestions, questions, and bug reports. Feel free to open issues or chat with us directly in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel in the
185+
We welcome all comments, suggestions, questions, and bug reports. Feel free to open issues or chat with us directly in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel in the
162186
[OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
163187
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.
164188

165-
166189
<!-- *********************************************************************** -->
190+
167191
<a name="contributing"></a>
192+
168193
## Contributing
194+
169195
Please check our [Contribution Guidelines](/CONTRIBUTING.md).

0 commit comments

Comments
 (0)