MFUI Select Tenant

React Select Tenant Page Component for all Money Forward products.

This package is built on top of @moneyforward/mfui-components.

Installation

1. Install the Package

Run the following command to install the package:

npm install @moneyforward/mfui-select-tenant

2. Install the Peer Dependencies

This package requires react and react-dom (v18 or above), plus @moneyforward/mfui-components, @moneyforward/mfui-design-tokens, and @moneyforward/mfui-icons-react as peer dependencies.

npm install react react-dom @moneyforward/mfui-components @moneyforward/mfui-design-tokens @moneyforward/mfui-icons-react

3. (Only Vite with SSR user) Add libraries to the noExternal dependencies

If you're using Vite with Server Side Rendering feature, you may need to add @moneyforward/mfui-select-tenant to ssr.noExternal in your vite.config.ts to ensure proper bundling and dependency resolution.

export default defineConfig({
  // Other configurations
  ssr: {
    noExternal: [
      "@moneyforward/mfui-select-tenant",
    ],
  },
});

Usage

Import Styles to Your Global Stylesheet

Add both CSS files into your global stylesheet (e.g. globals.css for Next.js application) in this order:

/* MFUI Components base styles (required) */
@import url('@moneyforward/mfui-components/styles.css');

/* MFUI Select Tenant styles */
@import url('@moneyforward/mfui-select-tenant/styles.css');

Important: select-tenant uses components from mfui-components, so you must import mfui-components styles first.

Basic Usage

SelectTenant is a controlled component — the consuming application owns the tenant list, search query, and pagination state.

import { SelectTenant } from '@moneyforward/mfui-select-tenant';

function App() {
  return (
    <SelectTenant
      tenants={tenants}
      totalCount={totalCount}
      searchQuery={searchQuery}
      onSearchChange={setSearchQuery}
      currentPage={currentPage}
      onPageChange={setCurrentPage}
      onTenantSelect={(uid) => {
        // handle tenant selection
      }}
    />
  );
}

For a complete integration example including filtering, hyphen normalization, and client-side pagination, see the InteractiveSelection story in Storybook.

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