Installation

This library is designed to streamline the development of consistent, accessible, and visually aligned user interfaces across WFP applications.

1. 🚀 Create a React App with Vite

To kickstart your new project using the Bridge Library, we recommend scaffolding your app with Vite — a fast, modern build tool optimized for React development.

🛠 Recommended Setup

Use the following command to create a new Vite-powered React app:

To install the Kit through npm, run:

npm create vite@latest my-app --template react

To install the Kit through yarn, run:

yarn create vite my-app --template react

↩️ Using React 18 Instead

To use the @wfp/react package successfully, you must ensure your project uses React 18. You can manually downgrade React and ReactDOM:

To install the Kit through npm, run:

npm install react@18 react-dom@18

To install the Kit through yarn, run:

yarn add react@18 react-dom@18

If you are using TypeScript (--template react-ts), you should also ensure the types match React 18 by installing them as development dependencies:

To install the Kit through npm, run:

npm install -D @types/react@^18.0.0 @types/react-dom@^18.0.0

To install the Kit through yarn, run:

yarn add --dev @types/react@^18.0.0 @types/react-dom@^18.0.0

Verify in package.json that react and react-dom now show versions like ^18.x.x.

2. Add the Kit as a dependency 📦

The next step is to add the Kit to your project as a dependency. You can choose to install it through a package manager like npm or yarn.

To install the Kit through npm, run:

npm install @wfp/react @wfp/styles @wfp/icons-react --save

To install the Kit through yarn, run:

yarn add @wfp/react @wfp/styles @wfp/icons-react

3. Load the Styles 🌈

This is a required step in case you want to load the full UI Kit stylesheet. You can either load the complete stylesheet or the scss files.

Import the CSS

To import the full CSS through React, first make sure to have a css loader installed, then use the following code:

import "@wfp/styles/styles.css";

Alternative: Import the SCSS

To import the full SCSS through React, first make sure to have a sass loader installed, then use the following code:

npm install @wfp/themes-core --save-dev

Or the below using yarn

yarn add @wfp/themes-core --dev

In your custom .scss file, import the theme and the components you need.

// Import all stylesheets
import '@wfp/styles';

// Use a theme
@use "@wfp/themes-core/dist/scss/default-css-theme" as defaulttheme;

:root {
  @include defaulttheme.theme-default();
}

4. Global Settings

Wrap your Application in the WFPCoreProvider to apply global settings.

import { WFPCoreProvider } from "@wfp/react";

<WFPCoreProvider>Your application</WFPCoreProvider>;

Advanced Setup

Importing only the stylesheets you need

Instead of importing all stylesheets, you can also import only the stylesheets you need. This is useful to reduce the size of your application.

// Or import only the stylesheets you need
@use "@wfp/styles/scss/themes";
@use "@wfp/styles/scss/theme";
@use "@wfp/styles/scss/reset";
@use "@wfp/styles/scss/components";

Install the latest features 🌱

Install the packages with the @alpha tag to get access to the latest features.

npm install @wfp/react@alpha  @wfp/styles@alpha