Skip to main content

Settings Block

The Settings Component is a fully customizable and accessible settings interface built with React and TypeScript. It provides a complete settings menu with modern design patterns, flexible customization options, and a clean hierarchical structure for organizing settings items.

πŸš€ Installation​

npm install @nodeblocks/frontend-settings-block

πŸ“– Usage​

import {Settings} from '@nodeblocks/frontend-settings-block';
Live Editor
function BasicSettings() {
  const settingsItems = [
    {
      icon: 'person' as const,
      title: 'Profile Settings',
      onClick: () => console.log('Profile clicked'),
    },
    {
      icon: 'lock' as const,
      title: 'Security',
      onClick: () => console.log('Security clicked'),
    },
    {
      icon: 'notifications' as const,
      title: 'Notifications',
      onClick: () => console.log('Notifications clicked'),
    },
  ];

  return (
    <Settings settingsTitle="Account Settings" items={settingsItems}>
      <Settings.Title>My Settings</Settings.Title>
      <Settings.SettingsRows />
    </Settings>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
settingsTitlestringRequiredTitle for the settings section used in context and default title rendering
itemsSettingsItem[]RequiredArray of settings items to be displayed
classNamestringundefinedAdditional CSS class name for styling the settings container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all props from the HTML div element.

Sub-Components​

The Settings component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Settings.Title​

PropTypeDefaultDescription
childrenReactNodesettingsTitle from contextTitle content - falls back to settingsTitle if not provided
classNamestringundefinedAdditional CSS class name for styling the title

Note: This component inherits all standard HTML h4 element props.

Settings.SettingsRow​

PropTypeDefaultDescription
iconIconTypeRequiredIcon to display on the left side of the settings row
onClick() => voidRequiredFunction to handle row click interactions
childrenReactNodeundefinedContent to display as the settings row text

Note: This component inherits all standard HTML div element props.

Settings.SettingsRows​

PropTypeDefaultDescription
itemsSettingsItem[]Items from contextArray of settings items to render - falls back to context items if not provided
childrenReactNodeAuto-generated rowsCustom content to override default settings rows rendering
classNamestringundefinedAdditional CSS class name for styling the rows container

Note: This component inherits all standard HTML div element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Settings} from '@nodeblocks/frontend-settings-block';

// Settings item structure
interface SettingsItem {
  icon: ComponentProps<typeof Settings.SettingsRow>['icon'];
  title: string;
  onClick: () => void;
}

// Custom settings with additional functionality
interface CustomSettingsProps {
  settingsTitle: string;
  items: SettingsItem[];
  onSettingClick?: (item: SettingsItem) => void;
}

const MySettingsPanel = () => {
  const handleProfileSettings = () => {
    console.log('Opening profile settings');
    // Navigate to profile settings
  };

  const handleSecuritySettings = () => {
    console.log('Opening security settings');
    // Navigate to security settings
  };

  const settingsItems: SettingsItem[] = [
    {
      icon: 'person',
      title: 'Profile Information',
      onClick: handleProfileSettings
    },
    {
      icon: 'lock',
      title: 'Privacy & Security',
      onClick: handleSecuritySettings
    },
    {
      icon: 'notifications',
      title: 'Notification Preferences',
      onClick: () => console.log('Notifications')
    }
  ];

  return (
    <Settings
      settingsTitle="Account Settings"
      items={settingsItems}
      className="custom-settings-container">
      <Settings.Title className="custom-title">
        Manage Your Account
      </Settings.Title>
      <Settings.SettingsRows className="custom-rows" />
    </Settings>
  );
};

// Custom settings rows with individual control
const CustomSettingsExample = () => {
  return (
    <Settings
      settingsTitle="Advanced Settings"
      items={[]}>
      <Settings.Title>Custom Settings</Settings.Title>
      <div className="custom-settings-section">
        <Settings.SettingsRow
          icon="person"
          onClick={() => console.log('Custom profile action')}>
          Profile Management
        </Settings.SettingsRow>
        <Settings.SettingsRow
          icon="notifications"
          onClick={() => console.log('Custom preferences action')}>
          Application Preferences
        </Settings.SettingsRow>
        </div>
    </Settings>
  );
};

Built with ❀️ using React, TypeScript, and modern web standards.