@bolttech/atoms-select v0.21.2

Select Component

The Select and SelectWithHeaders components are React components designed to provide customizable dropdown select inputs. These components allow users to choose from a set of options using dropdown menus, with optional headers for grouping.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the Select and SelectWithHeaders components in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-select

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-select

Once you have the required dependencies installed, you can start using the Select and SelectWithHeaders components in your React application.

Usage

The Select component provides a dropdown menu for selecting options. The SelectWithHeaders component adds the ability to group options with headers. Both components support customization through various props.

To use the components, import them and include them in your JSX:

import React from 'react';
import { Select, SelectWithHeaders } from '@bolttech/atoms-select';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  const options = [
    { id: 'option1', label: 'Option 1', value: 'value1' },
    { id: 'option2', label: 'Option 2', value: 'value2' },
  ];

  const optionsWithHeaders = [
    {
      header: 'Header 1',
      options: [
        { id: 'option1', label: 'Option 1', value: 'value1' },
        { id: 'option2', label: 'Option 2', value: 'value2' },
      ],
    },
    {
      header: 'Header 2',
      options: [
        { id: 'option3', label: 'Option 3', value: 'value3' },
        { id: 'option4', label: 'Option 4', value: 'value4' },
      ],
    },
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Select options={options} onChange={(selectedOption) => console.log('Selected:', selectedOption)} />

      <SelectWithHeaders options={optionsWithHeaders} onChange={(selectedOption) => console.log('Selected:', selectedOption)} />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Select and SelectWithHeaders components accept similar props:

Select Props

SelectWithHeaders Props

Example

Here's an example of using the Select and SelectWithHeaders components:

<Select
  options={options}
  onChange={(selectedOption) => console.log('Selected:', selectedOption)}
/>

<SelectWithHeaders
  options={optionsWithHeaders}
  onChange={(selectedOption) => console.log('Selected:', selectedOption)}
/>

This will render a Select component with a dropdown menu and a SelectWithHeaders component with grouped options and headers.

Contributing

Contributions to the Select and SelectWithHeaders components are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.