mt-react-components

mt-react-components is a collection of lightweight, reusable React components.

mt-react-components is supported by Mettle Tech. Perfect for dashboards, ag-grid, tables, grouped UI elements and modern React applications.

Features include:

• 🔍 MTSearchComponent: A debounce-enabled search input with clear functionality.
• 🔘 MTSwitchButton: A customizable toggle switch.
• 📋 MTPopoverMenu: A flexible action menu using popovers.
• 🪪 MTCustomLegend: A customizable React legend component designed to display a titled fieldset with consistent styles and flexible props. Ideal for dashboards, charts, and grouped UI elements.
• ✅ MTCheckbox: A customizable React checkbox component that supports both single and multiple checkbox modes with optional image/logo rendering. Ideal for forms with flexible input requirements.
• 🔘 MTRadioButton: A customizable and reusable radio button component for React applications. Supports both single radio mode and grouped radio button mode with flexible styling options.
• 📋 MTAutosuggestComponentWithCount: A customizable React multi-select dropdown component built on top of react-select, offering a compact and user-friendly UI with a “Select All” option and a selected item count summary. Ideal for filters, batch selectors, and compact UI use cases.

✨ Features

MTSearchComponent

• Debounced input using react-debounce-input
• Clear button to reset search
• Customizable placeholder, width, debounce timeout
• Simple styling included

🛠 MTSearchComponent Props

| Prop | Type | Default | Description | |------------------|----------|------------|-------------------------------------------| | value | string | – | Controlled input value | | onChange | func | – | Callback for input change | | clearValue | func | – | Callback to clear input | | placeholder | string | "Search" | Placeholder text | | minLength | number | 2 | Minimum length to trigger debounce | | debounceTimeout| number | 500 | Delay before calling onChange (ms) | | autoComplete | string | "off" | Input autoComplete attribute | | width | string | "200px" | Component width |

📘 Usage – MTSearchComponent

import { MTSearchComponent } from 'mt-react-components';

const MyComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = (val) => {
    setValue(val);
  };

  const handleClear = () => {
    setValue('');
  };

  return (
    <MTSearchComponent
      value={value}
      onChange={handleChange}
      clearValue={handleClear}
      placeholder="Search here"
    />
  );
};

🖼️ How it looks

MTSwitchButton

• A simple toggle switch for enabling or disabling a setting
• Customizable colors and sizes
• Supports both controlled and uncontrolled modes
• Lightweight and easy to use

🛠 MTSwitchButton Props

| Prop | Type | Default | Description | |------------------|----------|------------|-------------------------------------------| | checked | bool | false | Determines whether the switch is on or off| | onChange | func | – | Callback function when the switch is toggled| | disabled | bool | false | Disables the switch if true | | colorOn | string | "#4CAF50" | Color of the switch when it’s turned on | | colorOff | string | "#ccc" | Color of the switch when it’s turned off | | size | string | "medium" | Size of the switch ("small", "medium", "large")| | onLabel | string | "On" | Label displayed when switch is on | | offLabel | string | "Off" | Label displayed when switch is off |

📘 Usage – MTSwitchButton

import { MTSwitchButton } from 'mt-react-components';

const MyComponent = () => {
  const [isOn, setIsOn] = useState(false);

  const handleSwitch = (checked) => {
    setIsOn(checked);
  };

  return (
    <MTSwitchButton
      checked={isOn}
      onChange={handleSwitch}
      onLabel="On"
      offLabel="Off"
    />
  );
};

🖼️ How it looks

MTPopoverMenu

• A simple customizable React popover menu component
• Ideal for grid/table actions
• Easily configurable and reusable
• Lightweight and easy to use

🛠 MTPopoverMenu Props

| Prop | Type | Default | Description | |--------------------|----------|---------------- |------------------------------------------------------ | | placement | string | right | Position of the popover (top, right, bottom, left) | | actions | array | [] | List of action objects (see structure below) | | children | ReactNode| required | Element that triggers the popover on click | | gridData | any | undefined | Data passed to the onClick of each action | | wrapperClassName | string | 'popup-wrapper' | Class name applied to the popover wrapper for styling |

🛠 MTPopoverMenu Action Object Structure

| Property | Type | Required | Description | |---------------|----------|------------|-------------------------------------- | | label | string | ✅ | The text label of the action | | icon | string | ✅ | Font Awesome class for the icon | | onClick | func | ✅ | Callback invoked with gridData | | shouldShow | bool | ✅ | Whether this action should be shown |

📘 Usage – MTPopoverMenu

import { MTPopoverMenu } from 'mt-react-components';

const MyComponent = () => {
  return (
    <MTPopoverMenu
    placement="left"
    gridData={params}
    actions={[
        {
            label: 'Edit',
            icon: 'fa-pencil',
            onClick: edit,
            shouldShow: true,
        },
        {
            label: 'Delete',
            icon: 'fa-trash',
            onClick: delete,
            shouldShow: true,
        }
    ]}
    >
        <button className="ellipsisIcon"><i className="fa fa-ellipsis-v"></i></button>
    </MTPopoverMenu>
  );
};

🖼️ How it looks

MTCustomLegend

• Customizable title, font size, and colors
• Adjustable border and background
• Easily composable with any JSX content
• Lightweight and framework-agnostic (just needs React)

🛠 MTCustomLegend Props

| Prop | Type | Default | Description | | ----------------- | ----------- | ----------- | --------------------------------------------- | | title | string | "" | The title displayed at the top of the legend. | | body | ReactNode | null | The JSX content to display inside the legend. | | className | string | "" | Additional CSS classes for custom styling. | | backgroundColor | string | "#ffffff" | Background color of the fieldset container. | | borderColor | string | "#EEF0F5" | Color of the fieldset border. | | borderRadius | string | "6" | Border radius of the fieldset, in pixels. | | titleFontSize | string | "15" | Font size of the title, in pixels. | | titleColor | string | "#5f646d" | Color of the title text. |

📘 Usage – MTCustomLegend

import { MTCustomLegend } from 'mt-react-components';

const MyComponent = () => {
  return (
    <MTCustomLegend
      title="Your title"
      className="You can add your own class name"
      backgroundColor="#ffffff"
      borderColor="#EEF0F5"
      borderRadius="6"
      titleFontSize="15"
      titleColor="#5f646d"
      body={<>Your content</>}
    >
  );
};

🖼️ How it looks

MTCheckbox

• Single checkbox mode for boolean fields
• Multiple checkbox support with dynamic options
• Optional image/logo display beside options
• Custom styling via className
• Fully accessible and keyboard-friendly
• Support for disabled state

🛠 Single Checkbox Mode

| Prop | Type | Default | Description | | ----------- | ---------- | ------- | ------------------------------------ | | label | string | — | Label displayed next to the checkbox | | name | string | — | Name of the input field | | checked | boolean | false | Checked state of the checkbox | | onChange | function | — | Callback when checkbox state changes | | className | string | "" | Custom class for styling | | disabled | boolean | false | Disable the checkbox |

🛠 Multiple Checkbox Mode (options provided)

| Prop | Type | Default | Description | | ----------- | ---------- | ------- | --------------------------------------------------------------------------- | | options | array | — | Array of checkbox items with label, checked, logo_url, and disabled | | onChange | function | — | Callback when any option is toggled | | showImage | boolean | false | Show image/logo for each checkbox if available | | className | string | "" | Custom class for wrapper | | disabled | boolean | false | Disable all checkboxes |

📘 Usage – MTCheckbox

import { MTCheckbox } from 'mt-react-components';

const MyComponent = () => {
  const [checked, setChecked] = React.useState(false);
  const [options, setOptions] = React.useState([
    { label: "Wi-Fi", checked: false, logo_url: "", disabled: false },
    { label: "AC", checked: true, logo_url: "", disabled: false }
  ]);

  const handleSingleChange = (e, name) => {
    setChecked(e.target.checked);
  };

  const handleMultiChange = (index) => {
    const updated = [...options];
    updated[index].checked = !updated[index].checked;
    setOptions(updated);
  };

  return (
    <>
      {/* Single Checkbox */}
      <MTCheckbox
        name="name"
        label="Your label"
        checked={checked}
        onChange={handleSingleChange}
      />

      {/* Multiple Checkbox */}
      <MTCheckbox
        options={options}
        onChange={handleMultiChange}
        showImage={true}
      />
    </>
  );
};

🖼️ How it looks

MTRadioButton

• Supports single and multiple radio button modes
• Custom styling with included CSS
• Controlled component with checked and onChange support
• Works well with forms and dynamic data
• Lightweight and React 17+/18+ compatible

🛠 MTRadioButton Props

| Prop | Type | Default | Description | | ----------- | --------------- | ----------- | ------------------------------------------------------------------------- | | label | string | "" | Label for the single radio mode | | name | string | "" | Name attribute for the radio input | | checked | boolean | false | Controls the checked state for single radio mode | | onChange | function | undefined | Callback for handling change. In multi mode, receives the selected index. | | options | Array<object> | undefined | Array of { label, checked, disabled? } for grouped radio buttons | | className | string | "" | Additional class names for styling the wrapper | | disabled | boolean | false | Disables the entire radio button(s) |

📘 Usage – MTRadioButton

import { MTRadioButton } from 'mt-react-components';

const MyComponent = () => {
  const [gender, setGender] = useState({
        male: true,
        female: false,
    });

    const [options, setOptions] = useState([
        { label: 'WiFi', checked: true },
        { label: 'Parking', checked: false },
    ]);

    const handleSingleChange = (event, type) => {
      let genderTemp = Object.assign({}, gender);
      const { checked, value } = event.target;
      
        if (type == "male") {
            if (checked) {
                genderTemp = { ...genderTemp, "male": true, "female": false}
                setGender(genderTemp);
            } else {
                genderTemp = { ...genderTemp, "male": false, "female": false}
                setGender(genderTemp);
            }
        }
        if (type == "female") {
            if (checked) {
                genderTemp = { ...genderTemp, "female": true, "male": false}
                setGender(genderTemp);
            } else {
                genderTemp = { ...genderTemp, "female": false, "male": false}
                setGender(genderTemp);
            }
        }
    }

    const handleMultiChange = (selectedIndex) => {
        const updatedOptions = options.map((item, index) => ({
            ...item,
            checked: index === selectedIndex,
        }));
        setOptions(updatedOptions);
    };

    return (
        <div>
            {/* Single Radio Button Group (Gender) */}
            <MTRadioButton
                name="gender"
                label="Male"
                checked={gender.male}
                onChange={(e) => handleSingleChange(e, "male")}
            />
            <MTRadioButton
                name="gender"
                label="Female"
                checked={gender.female}
                onChange={(e) => handleSingleChange(e, "female")}
            />

            {/* Multiple Radio Buttons (Facilities) */}
            <MTRadioButton
                name="facilities"
                options={options}
                onChange={handleMultiChange}
            />
        </div>
    );
};

export default MyComponent;

🖼️ How it looks

MTAutosuggestComponentWithCount

• Multi-select with "Select All" functionality
• Displays + N more count instead of all selected chips
• Custom dropdown header with close button
• Controlled component with external state support
• Easily stylable with CSS
• Custom width and placeholder support

🛠 MTAutosuggestComponentWithCount

| Prop | Type | Default | Description | |-------------------|------------|---------------------|-----------------------------------------------------------------------------| | options | Array | [] | The dropdown list of selectable options. Each option is an object { label, value }. | | selectedOptions | Array | [] | Currently selected options (controlled input). | | onChange | Function | undefined | Callback triggered when the selected options change. | | placeholder | String | "Select Options" | Placeholder shown when no option is selected. | | menuHeader | String | "Options" | Header text displayed at the top of the dropdown. | | classNamePrefix | String | "multi-dropdown-box" | Prefix for class names to help with styling customization. | | selectAll | Boolean | true | Enables or disables the "Select All" option. | | width | Number | 200 | Sets the width of the dropdown in pixels. |

📘 Usage – MTAutosuggestComponentWithCount

import { MTAutosuggestComponentWithCount } from 'mt-react-components';

const MyComponent = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  
  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' }
  ];

  const handleChange = (selected) => {
    setSelectedOptions(selected);
  };

  return (
    <MTAutosuggestComponentWithCount
      options={options}
      selectedOptions={selectedOptions}
      onChange={handleChange}
      placeholder="Select Options"
      menuHeader="Choose Options"
      selectAll={true}
    />
  );
};

🖼️ How it looks

📦 Installation

npm install mt-search-component