reusable-react-dropdown-component

The ru-react-dropdown-component library provides the DropDownBox component, a customizable and feature-rich dropdown selector for React applications. This documentation outlines its props, behavior, and usage.

Demo and DOCS 👇

👉 ru-react-dropdown-component.vercel.app

Usage Example

import React, { useState } from "react";
import DropDownBox from "ru-react-dropdown-component";
// Importing CSS is optional. However, if you notice a slight delay in
//  styles being applied, consider importing it for better performance.
import "ru-react-dropdown-component/dist/styles.css";

const MyComponent = ({ country }) => {
  const [selectedValue, setSelectedValue] = useState("");
  const options = [
    { label: "Option 1", value: "option1" },
    {
      label: "Option 2",
      value: "option2",
      // Additional searchable values for this option
      searchOptions: ["[email protected]", "123-456-789"],
    },
  ];

  return (
    <DropDownBox
      title="Select City"
      animateTitle={true}
      options={options}
      placeholder="Choose..."
      size="medium"
      showSearch={true}
      onSelect={(value, context) => {
        console.log(value, context);
      }}
      beforeSelect={(value, context) => {
        console.log(value, context);
      }}
      afterSelect={(value, context) => {
        console.log(value, context);
      }}
      changeObserver={{
        target: country,
        handler: (setter, context) => {
          if (context.dropdownValue) {
            setter("");
          }
        },
      }}
      styles={{
        selectBox: { border: "1px solid #ccc" },
        selectedValue: { color: "blue" },
      }}
      resetButton={true}
    />
  );
};

export default MyComponent;

Notes

• Ensure to provide required props such as options and onSelect for proper functionality.
• The component is designed to be flexible with various styling and functionality customizations.

Props

1. title
2. animateTitle
3. options
4. placeholder
5. width
6. customArrow
7. disabled
8. loading
9. hideScrollbar
10. incomingValue
11. resetButton
12. onSelect
13. beforeSelect
14. afterSelect
15. onOpen
16. showSearch

• delay
• onSearch
• placeholder

17. changeObserver

• target
• handler

18. scrollListenerTarget

• id
• className
• ref

19. styles

• selectBox
• selectedValue
• placeholder
• title
• arrow
• disabledState
• optionsContainer
• optionItem
• searchInput