Configuration

ABP React provides services and hooks for managing ABP application configuration.

Loading Configuration

Use ApplicationConfigurationService to fetch the ABP configuration:

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { ApplicationConfigurationService, configSlice } from '@abpjs/core';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    const loadConfig = async () => {
      const config = await ApplicationConfigurationService.get('https://localhost:44300');
      dispatch(configSlice.actions.setConfig(config));
    };
    loadConfig();
  }, [dispatch]);

  // ...
}

useConfig Hook

Access the configuration anywhere in your app:

import { useConfig } from '@abpjs/core';

function ConfigExample() {
  const config = useConfig();

  return (
    <div>
      <p>Current User: {config.currentUser?.userName}</p>
      <p>Current Tenant: {config.currentTenant?.name}</p>
      <p>Language: {config.localization?.currentCulture?.name}</p>
    </div>
  );
}

Configuration Structure

The ABP configuration includes:

Property	Description
currentUser	Information about the logged-in user
currentTenant	Current tenant information (for multi-tenant apps)
localization	Available languages and current culture
auth	Authentication configuration
setting	Application settings
features	Enabled features
globalFeatures	Global feature flags
multiTenancy	Multi-tenancy configuration

Accessing Current User

import { useConfig } from '@abpjs/core';

function UserInfo() {
  const { currentUser } = useConfig();

  if (!currentUser?.isAuthenticated) {
    return <p>Not logged in</p>;
  }

  return (
    <div>
      <p>Username: {currentUser.userName}</p>
      <p>Email: {currentUser.email}</p>
      <p>Roles: {currentUser.roles?.join(', ')}</p>
    </div>
  );
}

Accessing Settings

import { useConfig } from '@abpjs/core';

function SettingsExample() {
  const { setting } = useConfig();

  const getSetting = (name: string) => {
    return setting?.values?.[name];
  };

  return (
    <div>
      <p>App Name: {getSetting('App.Name')}</p>
    </div>
  );
}

selectSettings (v1.0.0)

Use the selectSettings selector for filtered settings access:

import { selectSettings } from '@abpjs/core';
import { useSelector } from 'react-redux';

function SettingsPanel() {
  // Get all settings
  const allSettings = useSelector(selectSettings());

  // Get settings filtered by keyword
  const localizationSettings = useSelector(selectSettings('Abp.Localization'));

  return (
    <div>
      <h3>Localization Settings</h3>
      <ul>
        {Object.entries(localizationSettings).map(([key, value]) => (
          <li key={key}>{key}: {value}</li>
        ))}
      </ul>
    </div>
  );
}

ConfigStateService (v1.1.0)

The ConfigStateService provides a service-based API for accessing configuration state, aligned with Angular ABP naming conventions:

import { useAbp } from '@abpjs/core';

function ConfigExample() {
  const { configStateService } = useAbp();

  // Get application info
  const appInfo = configStateService.getApplicationInfo();

  // Find route by path
  const route = configStateService.getRoute('/users', undefined, undefined);

  // Find route by name
  const routeByName = configStateService.getRoute(undefined, 'Users');

  // Find route by URL
  const routeByUrl = configStateService.getRoute(undefined, undefined, '/admin/users');

  // Get settings with optional keyword filter
  const emailSettings = configStateService.getSettings('Email');

  // Get localized string with interpolation
  const greeting = configStateService.getLocalization(
    { key: 'HelloUser', defaultValue: 'Hello!' },
    'John'
  );

  return (
    <div>
      <h1>{appInfo?.name}</h1>
      <p>{greeting}</p>
    </div>
  );
}

ConfigStateService Methods

Method	Parameters	Returns	Description
getApplicationInfo()	-	Config.Application | undefined	Get application name and logo
getRoute()	path?, name?, url?	ABP.FullRoute | undefined	Find route by path, name, or URL
getSettings()	keyword?: string	Record<string, string>	Get settings, optionally filtered
getLocalization()	key, ...params	string	Get localized string with interpolation

note

ConfigService has been renamed to ConfigStateService in v1.1.0. The old name is still exported as an alias but will be removed in v2.0.0.

Related

• Localization - Multi-language support
• Session - Session state