npm.io
0.37.8 • Published 3 weeks ago

@bolttech/molecules-dropdown

Licence
—
Version
0.37.8
Deps
8
Size
262 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

Dropdown Component

The Dropdown component is a customizable React component that provides a dropdown input with a list of selectable options.

Installation

To use the Dropdown component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-dropdown

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-dropdown

Usage

You can utilize the Dropdown component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import { Dropdown } from '@bolttech/molecules-dropdown'; // Adjust the path to your component

const options = [
  { id: '1', label: 'Option 1', value: 'option1' },
  { id: '2', label: 'Option 2', value: 'option2' },
  { id: '3', label: 'Option 3', value: 'option3' },
];

function App() {
  const handleOptionChange = (selectedOption) => {
    console.log('Selected option:', selectedOption);
  };

  return (
    <div>
      <Dropdown label="Select an option" optionList={options} value="option2" onChange={handleOptionChange} />
    </div>
  );
}

export default App;

Props

The Dropdown component accepts the following props:

Prop Type Description
label string Label for the dropdown.
variant string Variant style of the dropdown. Defaults to 'grey'.
required boolean Whether the dropdown is required or not.
optionList OptionType[] Array of selectable options for the dropdown.
disabled boolean Whether the dropdown is disabled or not.
errorMessage string Error message to display when there's an error with the dropdown.
urlFilterOptions string URL for fetching filtered options based on input.
id string Component identification.
dataTestId string The data-testid attribute for testing purposes.
filterOptionsParam function Function to filter options based on input and URL.
value string Currently selected value.
onChange function Callback function triggered when the selected option changes.
onBlur function Callback function triggered when the dropdown loses focus.
onFocus function Callback function triggered when the dropdown is focused.
placeholder string Placeholder text for the input.
disableSearch boolean Boolean that represent if we should disable user searching on the dropdown. Defaults to false
onKeyUp function The onkeyup event occurs when the user releases a key on the keyboard
onKeyDown boolean Onkeydown is an event handler in Javascript that gets called when a key is pressed on the keyboard
asyncOptionList boolean A boolean prop that controls a different behavior when OptionList are set by an API request
helperMessage string An optional string to display as a helper message for the dropdown
usePortal boolean Renders the dropdown options in a portal (document.body), useful when inside overflow containers like modals. Defaults to false.

Functionality

The Dropdown component provides the following functionality:

  • Option Selection: Allows the user to select an option from the dropdown.
  • Input Interaction: The input field can be focused, blurred, and modified.
  • Filtering: Supports dynamic option filtering based on input and URL.
  • Accessibility: Proper accessibility structure is maintained for interacting with the dropdown.

Contribution

Contributions to the Dropdown component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.