MFUI React Router

React Router utilities for @moneyforward/mfui-components.

MFUI's primitives (such as TextLink) are router-agnostic by design — they accept a standard href and stay free of any routing library. This package bridges them to React Router without adding router-specific concerns to the core components: it provides an adapter that wraps React Router's Link and plugs into MFUI's customLinkComponent. MFUI keeps forwarding the standard href, and the adapter maps it onto Link's to.

Installation

1. Install the package

npm install @moneyforward/mfui-react-router

2. Install the peer dependencies

This package requires react and react-dom (v18 or above), react-router (v7 or above), and @moneyforward/mfui-components.

npm install react react-dom react-router @moneyforward/mfui-components

Usage

ReactRouterLink

An adapter that lets MFUI components render React Router's Link through their customLinkComponent prop. MFUI components (TextLink, Breadcrumbs, Button, …) build their links from a standard href and forward it to the customLinkComponent, while React Router's Link expects to. ReactRouterLink maps the forwarded href onto to and renders Link, so the element navigates client-side — no router-specific prop leaks into the MFUI primitive, and the core components stay unchanged.

Render it inside a React Router context (e.g. RouterProvider, BrowserRouter, MemoryRouter).

import { Breadcrumbs, TextLink } from '@moneyforward/mfui-components';
import { ReactRouterLink } from '@moneyforward/mfui-react-router';

// With TextLink
<TextLink customLinkComponent={ReactRouterLink} href="/offices">
  Offices
</TextLink>;

// With Breadcrumbs (and any other component that takes customLinkComponent)
const items = [
  { label: 'Home', href: '/' },
  { label: 'Offices', href: '/offices' },
  { label: 'Tokyo' },
];

<Breadcrumbs items={items} customLinkComponent={ReactRouterLink} />;

The ref MFUI passes to the customLinkComponent is forwarded to the underlying anchor, so components that measure their link (e.g. Breadcrumbs truncation) keep working.

All company names, product and service names, and logos are trademarks or registered trademarks of their respective owners.