Overview

The @abpjs/feature-management package provides a feature management interface for administrators to manage features for tenants and other entities. This is the React equivalent of Angular's @abp/ng.feature-management module.

New in v0.8.0

This package was introduced in ABP React v0.8.0.

Installation

npm install @abpjs/feature-management

Required peer dependencies:

npm install @abpjs/core @abpjs/theme-shared

What are Features?

In ABP Framework, Features are a way to enable/disable or configure functionality for tenants in a multi-tenant application. Common use cases include:

• Enabling/disabling modules per tenant
• Setting limits (e.g., max users, storage quota)
• Configuring tenant-specific settings

Features

• Feature Modal - Ready-to-use modal for managing features
• Toggle Features - Boolean on/off features
• Text Features - Free text input features
• Provider Support - Manage features for tenants and other entities

Main Exports

Components

Component	Description
FeatureManagementModal	Modal for managing features

Hooks

Hook	Description
useFeatureManagement	Hook for programmatic feature management

Services

Service	Description
FeaturesService	Proxy service for feature management API (v3.2.0+)

Models

Model	Description
FeatureDto	Feature definition (v3.2.0+)
FeatureGroupDto	Feature group with nested features (v3.2.0+)
FeatureProviderDto	Provider info (name and key) (v3.2.0+)
GetFeatureListResultDto	Result of fetching features (v3.2.0+)

Feature Providers

Provider	Key	Description
T	Tenant ID	Features for a tenant

Quick Example

import { FeatureManagementModal } from '@abpjs/feature-management';
import { useState } from 'react';

function TenantFeatures({ tenantId }: { tenantId: string }) {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(true)}>
        Manage Features
      </button>

      <FeatureManagementModal
        providerName="T"
        providerKey={tenantId}
        visible={visible}
        onVisibleChange={setVisible}
        onSave={() => console.log('Features saved!')}
      />
    </>
  );
}

Integration with Tenant Management

The feature management modal is commonly used alongside tenant management to configure tenant-specific features:

import { FeatureManagementModal } from '@abpjs/feature-management';
import { usePermission } from '@abpjs/core';

function TenantActions({ tenant }) {
  const [showFeatures, setShowFeatures] = useState(false);
  const { hasPermission } = usePermission();

  // Check if user can manage features
  const canManageFeatures = hasPermission(
    'AbpTenantManagement.Tenants.ManageFeatures'
  );

  return (
    <>
      {canManageFeatures && (
        <button onClick={() => setShowFeatures(true)}>
          Features
        </button>
      )}

      <FeatureManagementModal
        providerName="T"
        providerKey={tenant.id}
        visible={showFeatures}
        onVisibleChange={setShowFeatures}
      />
    </>
  );
}

NPM Package

View on npm: @abpjs/feature-management

Documentation

• Feature Modal - Using the feature modal
• Release Notes - Version history