BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Recommended Libraries
libraries

Recommendations

Tools & Libraries

A list of recommended libraries that are commonly used inside WFP.

Make sure your application follows the mandatory IT software solution quality standards.

Legacy libraries (no longer recommended)

  • Forms: react-final-form, redux-form
  • Charts: Victory
  • State management: redux-saga, redux, please use rtk-query instead
  • Sass: node-sass, deprecated in favor of dart-sass

Below, you’ll find a list of recommended libraries that are commonly used inside WFP. It’s up to you to exchange them with your choices.

Create-React-App

create-react-app is a starting point to set up your React applications with no build configuration. TODO: update with modern stack

CSS Preprocessors

scss/sass is a CSS pre-processor with syntax advancements and variable, functions, etc. Learn more about how to use scss with create-react-app.

Application state handling 💤

redux-toolkit it the official, opinionated toolset for efficient Redux development by providing a standardized implementation of common redux tasks.

rtk-query RTK Query is a powerful data fetching and caching tool. It is part of redux-toolkit and designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

Maps 🗺️

react-simple-maps is a map component to generate simple political maps

react-map-gl for maps using mapbox.gl

ArcGIS API for JavaScript for complex maps with custom layers

Forms 🧾

react-hook-form is a form library for react.

react-phone-input-2 is a customizable phone input library with auto formatting.

Microsoft Azure Authentication 👤

microsoft-authentication-library-for-js msal-react is a library which provides Azure Active Directory Library (ADAL) support for React.

Tables 📋

react-table is a lightweight and fully customizable library to provide complex data tables.

ag-grid is a grid library for complex tables with Excel-like features.

Linting & naming

Airbnb provides a useful styling guide on how to style JavaScript and react code.

Charts 📊

Recharts is a set of modular charting components for React.

Polyfills

Polyfills are needed for older browsers. We recommend babel-preset-env.

On this page

  • Create-React-App
  • CSS Preprocessors
  • Application state handling 💤
  • Maps 🗺️
  • Forms 🧾
  • Microsoft Azure Authentication 👤
  • Tables 📋
  • Linting & naming
  • Charts 📊
  • Polyfills
Storybook
Figma library
Contact us
2025 © World Food Programme