select-dropdown-options

select-dropdown-options is a highly flexible and customizable select input component for React, designed to seamlessly integrate into various applications and enhance user interactions

Features

• Adaptable data handling with customizable functions
• Powerful styling API leveraging Emotion
• Component Injection API for complete UI control
• Modular architecture with controllable state props
• Features include option groups

Installation

Install via npm or yarn:

npm install select-dropdown-options
# or
yarn add select-dropdown-options

Usage

With Class Component

import React from "react";
import { CustomSelect } from "select-dropdown-options";

const options = [
  { value: "React", label: "React" },
  { value: "Vue", label: "Vue" },
  { value: "Angular", label: "Angular" },
];

class App extends React.Component {
  state = { selectedItem: null };

  handleChange = (selectedItem) => {
    this.setState({ selectedItem });
    console.log(`Selected:`, selectedItem);
  };

  render() {
    return (
      <CustomSelect
        value={this.state.selectedItem}
        onChange={this.handleChange}
        options={options}
        placeholder="Choose a framework"
      />
    );
  }
}

export default App;

With Functional Component & Hooks

import React, { useState } from "react";
import { CustomSelect } from "select-dropdown-options";

const options = [
  { value: "Html", label: "Html" },
  { value: "Css", label: "Css" },
  { value: "Js", label: "Js" },
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);

  handleChange = (selectedItem) => {
    this.setState({ selectedItem });
    console.log(`Selected:`, selectedItem);
  };
  return (
    <CustomSelect
      value={selectedOption}
      onChange={handleChange}
      options={options}
      multiSelect
    />
  );
}

Props

Common props you may need:

• customContainerClass – Adds a custom class to the select component for styling.
• disabled – Disables the select dropdown, preventing user interaction.
• multiSelect – Enables multi-selection, allowing users to select multiple options.
• options – Provides an array of selectable options.
• value – Controls the currently selected value(s).
• onChange – Handles selection changes and updates the selected value(s).
• placeholder – Sets a custom placeholder text when no option is selected.
• defaultValue – Specifies the default selected option(s) when the component loads.

License

MIT License - Copyright (c) Ajith Kumar 2025