Aselect NPM | npm.io

Documentation

ASelect Component

The ASelect component is a customizable dropdown select component for React applications.

Installation

To install ASelect in your project, you can use npm:

npm install ASelect

Or yarn:

yarn add ASelect

Usage

Importing

import { ASelect } from "ASelect";

Basic Usage

<ASelect
  value={value}
  options={["Option 1", "Option 2", "Option 3"]}
  onChange={(selectedOption, selectedOptionObject, currentSearchString) =>
    setValue(selectedOption)
  }
/>

Output

Example with Array of Objects (with keyProp)

<ASelect
  value={value}
  options={[
    { id: 1, label: "Option 1" },
    { id: 2, label: "Option 2" },
    { id: 3, label: "Option 3" },
  ]}
  keyProp="label"
  onChange={(selectedOption, selectedOptionObject, currentSearchString) => {
    setValue(selectedOption);
    setCurrentObject(selectedOptionObject);
  }}
/>

Output 1 (keyProp="label")

Output 2 (keyProp="id")

Basic Example with Grouped Options

<ASelect
  value={value}
  options={[
    {
      groupName: "Group 1",
      options: ["Option 1", "Option 2"],
    },
    {
      groupName: "Group 2",
      options: ["Option 3", "Option 4"],
    },
  ]}
  onChange={(selectedOption, selectedOptionObject, currentSearchString) =>
    setValue(selectedOption)
  }
/>

Output

Advanced Example with Grouped Options

<ASelect
  value={value}
  options={[
    {
      groupName: "ID Group",
      options: [
        { id: 1, label: "Option 1" },
        { id: 2, label: "Option 2" },
        { id: 3, label: "Option 3" },
      ],
      keyProp: "id",
    },
    {
      groupName: "Label Group",
      options: [
        { id: 1, label: "Option 1" },
        { id: 2, label: "Option 2" },
        { id: 3, label: "Option 3" },
      ],
      keyProp: "label",
    },
  ]}
  onChange={(selectedOption, selectedOptionObject, currentSearchString) =>
    setValue(selectedOption)
  }
/>

Output

Props

Prop	Type	Default	Description
value	string		The currently selected value.
onChange	(selectedOption, selectedOptionObject, currentSearchString) => {}		Callback function invoked when a new value is selected.
options	array		List of options to display in the dropdown.
keyProp	string		Property to be used as a key within the objects of the options list. Mandatory if options is an array of objects.
searchable	boolean	true	Boolean indicating if the dropdown is searchable.
placeholder	string	"Search..."	Placeholder text for the input field.
disabled	boolean		Disables the select component.
width	string or number		Width of the select component.
zIndex	number	1	z-index for the dropdown.
fontSize	number	16	Font size for the select component.
required	boolean	false	Indicates whether the select component is required.

Conclusion

With the ASelect component, you can easily add customizable dropdown select functionality to your React applications. Choose from a variety of options including array of strings, array of objects with keyProp, and grouped options to suit your needs. Follow the documentation to install and use the component in your project for testing and development purposes.