Fundamental React

Overview

The fundamental-react library is a set of React components built using SAP Fundamental Styles. SAP Fundamental Styles is a design system and HTML/CSS component library used to create modern product user experiences with the SAP look and feel.

Features

• Built with SAP Fundamental Styles
• Set of React components
• API reference available
• Follows Semantic Versioning
• Supports css-modules

Installation

To install the fundamental-react library, follow these steps:

1. Install Node and Node Package Manager (NPM) if you haven’t already.
2. Install the fundamental-react package using NPM:

npm install fundamental-react

3. Edit your webpack configuration to handle the CSS files:

...
module: {
  rules: [
    ...
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
    ...
  ],
},
...

4. Import the components as needed in your React application:

import { Button, Card, ... } from 'fundamental-react';

5. Add fonts and icons separately to your project. You can download Font 72 and SAP icons and include them in your project.
6. Edit your webpack configuration to load font and icon fonts using file-loader:

...
module: {
  rules: [
    ...
    {
      test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
      use: ['file-loader'],
    },
    ...
  ],
},
...

7. Ensure components are sized correctly by including the following in your CSS:

html {
  font-size: 16px;
}

Summary

The fundamental-react library is a set of React components that follow the SAP Fundamental Styles design system. It provides a collection of reusable components for creating modern product user experiences with the SAP look and feel. The library can be installed easily and supports css-modules for avoiding style collisions on the same page. It follows Semantic Versioning and provides an API reference for guidance.