You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents). This project was formerly known as `fiori-for-react`.
27
-
28
-
### Explore our components
29
-
You can play around with our components by visiting our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
24
+
`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents).
25
+
This project was formerly known as `fiori-for-react`.
**Prerequisite: You have a React app.** In case you don't, we recommend to create one using [create-react-app](https://facebook.github.io/create-react-app/).<br/>
67
-
In order to use `ui5-webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
74
+
### Creating a new React app
75
+
76
+
You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
77
+
This template is installing all required dependencies for you and is setting up the `App.js` file for you:
### Add `@ui5/webcomponents-react` to an existing app
85
+
86
+
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:
You could import all components also from `@ui5/webcomponents-react` directly, but this will have a negative impact on your bundle size.
97
-
98
-
### Configure Compact/Cozy setting
99
-
UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
122
+
You can also import all components from `@ui5/webcomponents-react` directly.
100
123
101
-
```html
102
-
<scriptdata-ui5-configtype="application/json">
103
-
{
104
-
"compactSize":true
105
-
}
106
-
</script>
107
-
```
124
+
For Browser Support and the configuration of the UI5 Web Components, please take a look at the
125
+
[Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
126
+
[Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
127
+
[UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
108
128
109
129
### Browser Support
110
130
`@ui5/webcomponents-react` is supporting all modern major browsers. There is no support for Internet Explorer 11 built in.<br />
@@ -120,42 +140,12 @@ You can install `react-app-polyfill` and `@webcomponents/webcomponentsjs` with t
For Browser Support and the configuration of the UI5 Web Components, please take a look at the
124
-
[Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
125
-
[Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
126
-
[UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
127
-
128
-
### Improving Bundle Size
129
-
If you are running a default `create-react-app`, you will have will huge bundle size after creating a production build.
130
-
This is caused by the fact that the webpack bundler is including all UI5 Web Component translation files and CLDR data files in the application bundle.
131
-
In order to decrease the bundle size of the application a custom Webpack configuration should be provided.
132
-
1. Eject the react build with ```npm run eject```
133
-
2. Open ```config/webpack.config.js``` file and add the following lines before the last loader:
134
-
```js
135
-
{
136
-
test: [/cldr\/.*\.json$/,/i18n\/.*\.json$/],
137
-
loader:'file-loader',
138
-
options: {
139
-
name:'static/media/[name].[hash:8].[ext]',
140
-
},
141
-
type:'javascript/auto'
142
-
},
143
-
// "file" loader makes sure those assets get served by WebpackDevServer.
144
-
// When you `import` an asset, you get its (virtual) filename.
145
-
// In production, they would get copied to the `build` folder.
146
-
// This loader doesn't use a "test" so it will catch all modules
147
-
// that fall through the other loaders.
148
-
```
149
-
Please also refer to the [UI5 Web Components React Sample](https://github.com/SAP/ui5-webcomponents-sample-react#configure-react-build).
@@ -26,38 +27,53 @@ In addition to that, UI5 Web Components for React is providing complex component
26
27
27
28
## Getting Started
28
29
29
-
**Prerequisite: You have a React app.** In case you don't, we recommend to create one using [create-react-app](https://facebook.github.io/create-react-app/).<br/>
30
-
In order to use `ui5-webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
31
-
You will find this component most likely in `src/App.js`:
30
+
### Creating a new React app
31
+
32
+
You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
33
+
This template is installing all required dependencies for you and is setting up the `App.js` file for you:
### Add `@ui5/webcomponents-react` to an existing app
41
+
42
+
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:
You could import all components also from `@ui5/webcomponents-react` directly, but this will have a negative impact on your bundle size.
61
77
62
78
### Theming
63
79
@@ -81,14 +97,12 @@ Available Themes:
81
97
-`sap_belize_hcw`
82
98
83
99
### Configure Compact/Cozy setting
84
-
UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true```in the configuration ```script``` tag:
100
+
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.
0 commit comments