React Dropdown

Installation

npm i summer-ui-react-dropdown

Demo

https://k18382003.github.io/react-dropdown-demo/

Props

| Props Name | Description | Data Type | Required | | ------------------ | ----------------------------------------------------------------------- | ----------------- | -------- | | multipleSelect | Multiple select | boolean | NO | | options | The select options must be [{displayName:'name', value:'value'}] format | object array | YES | | textbarPlaceHolder | The placeholder text for the select input | string | NO | | textbarStyle | Adding a class name to style select input | string | NO | | searchbarStyle | Adding a class name to style search bar | string | NO | | styleDropDownMenu | Adding a class name to style dropdown menu | string | NO | | selectedValues | Selected values variable | stateful value | YES | | setSelectedValues | Adding a class name to style dropdown menu | SetState function | YES |

Example

// App.js
import ReactDropdown from 'summer-ui-react-dropdown';
import { useState } from 'react';
import './App.css';
import './react-dropdown.css';

const App = () => {
  const options = [
    { displayName: 'Apple', value: 1 },
    { displayName: 'Orange', value: 2 },
    { displayName: 'Banana', value: 3 },
  ];
  const [selectedValues, setSelectedValues] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    // Here you can perform any action with the selected data, such as sending it to a server
    console.log({ ...selectedValues });

    // Clearing the form after submission
    setSelectedValues([]);
  };
  return (
    <form onSubmit={handleSubmit}>
      <CustomDropDown
        options={options} //The select options must be [{displayName:'name', value:'value'}] format
        multipleSelect={true} //A multiple choices list
        selectedValues={selectedValues} //Selected values
        setSelectedValues={setSelectedValues} //A UseState to set selectedValues variable
        textbarPlaceHolder={'Favorite fruits'} //The placeholder text for the select input
        textbarStyle={'mytextBar'} //Adding a class name to style select input
        searchbarStyle={'mysearchBar'} //Adding a class name to style search bar
        styleDropDownMenu={'mydropDown'} //Adding a class name to style dropdown menu
      />
      <button>Submit</button>
    </form>
  );
};

export default App;

// react-modal.css
.mytextBar {
  font-size: 1.5rem;
  border: 1px solid blue;
}

.mysearchBar {
  font-size: 1.5rem;
}

.mydropDown li:hover {
  background-color: red;
}