The UI Kit provides developers with React.js components, scss, css, html and assets.
WFP front-end technology standards
The WFP UI Kit uses React as the underlying JS framework, in line with the WFP official guidelines for software development. Therefore, all WFP applications should use it, together with the UI Kit. The only exceptions are off-the-shelf solutions (e.g. Saas) and/or non-apps (e.g. the external corporate website, and/or basic landing pages used for fundraising, etc).
To kickstart your new project with the Kit, we do recommend to generate a boilerplate React app with the official create-react-app tool or other bootstraping tools. An example using the UI-Kit and create-react-app
can be found here.
You can use the Codesandbox template template to try out the Kit without installing anything.
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
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.
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";
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 stylesheetsimport '@wfp/styles';// Use a theme@use "@wfp/themes-core/dist/scss/default-css-theme" as defaulttheme;:root {@include defaulttheme.theme-default();}
Wrap your Application in the WFPCoreProvider to apply global settings.
import { WFPCoreProvider } from "@wfp/react";<WFPCoreProvider>Your application</WFPCoreProvider>;
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";
This is not recommended for production environments.
Install the packages with the @alpha
tag to get access to the latest features.
npm install @wfp/react@alpha @wfp/styles@alpha