ftm-components-react

Bare, unstyled React components for rendering Follow The Money entity data.

Components emit semantic HTML with stable class names (e.g. PropertyTable, Property__url, EntityLink__a) and ship no CSS — bring your own styles.

There have been efforts by the aleph team to maintain a react-ftm library which eventually got inlined into the main codebase. This library is based on that idea but not intended to be a replacement.

Installation

npm install @dataresearchcenter/ftm-components-react

Peer dependencies your project provides:

• react / react-dom 19
• @mui/x-data-grid ^9.0 (used by EntitiesTable)
• @mui/material ^9.0 (required by the data grid)
• flag-icons ^7.0 (optional — only for CountryFlag, see below)

Alternatively, use this repo as a git submodule, as a convention at the path lib/ftm:

git submodule add https://github.com/dataresearchcenter/ftm-components.git lib/ftm
git submodule update --remote lib/ftm

Usage

import {
  EntitiesTable,
  EntityLink,
  PropertyTable,
} from "@dataresearchcenter/ftm-components-react";

<PropertyTable entity={entity} />
<EntitiesTable entities={payments} schema="Payment" />

Components accept a LinkComponent prop to integrate entity links with any routing framework (Next.js, React Router, …).

Country flags

CountryFlag (and country property rendering) only emits flag-icons class names (<span class="fi fi-de" />) — no stylesheet is included. To display flags, install the optional peer dependency and load its CSS once in your app:

npm install flag-icons

// e.g. in your app entry
import "flag-icons/css/flag-icons.min.css";

Without it, flags simply render as empty inline elements.

FTM's country code zz ("Global") has no flag-icons sprite and instead renders an inline globe SVG marked CountryFlag--global. Its colours come from the --ftm-flag-global-bg and --ftm-flag-global-fg custom properties, both defaulting to currentColor:

.CountryFlag--global {
  --ftm-flag-global-bg: #2a5db0;
  --ftm-flag-global-fg: #fff;
}

Development

npm install
npm run storybook        # component dev environment with docs
npm run build            # compile library to dist/
npm run build-storybook  # static Storybook build

Supported by

Media Tech Lab Bayern batch #3