UnpopularSelect Documentation

The UnpopularSelect component provides a versatile and customizable dropdown for selecting options. This guide will cover its various features and usage.

UnpopularSelect Component

The UnpopularSelect component has various props to customize its appearance and behavior.

Props

asyncLoad
clearable (function) -
containerStyle (string) -
disabled (object) -
groupOptions (boolean) - false.
placeholder (string) - #0056b3.
renderOption (string) - “8px“.
renderSelected (string) - s “16px“.
style (string) - Default is “12px 24px“.
value (string) -
onChange (function) -
options (array) -
searchable (boolean) - false.

Usage Example

Here's a basic example of how to use the UnpopularSelect component:

import React from 'react';
import UnpopularSelect from 'unpopular-js';

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <UnpopularSelect
        options={options}
        value={selectedOption}
        onChange={handleSingleSelect}
        style={styles.select}
      />

      <UnpopularSelect
        options={options}
        value={selectedOptions}
        onChange={handleMultiSelect}
        multiSelect
        style={styles.select}
      />

      <UnpopularSelect
        asyncLoad
        clearable
        groupOptions
        placeholder="Select an option..."
        renderOption={renderCustomOption}
        renderSelected={renderCustomOption}
        style={styles.select}
        value={selectedOption}
        onChange={handleSingleSelect}
        options={options}
        searchable
      />
    </div>
  );
};

export default App;

Extended Use Cases

Here are additional use cases to test the UnpopularSelect component with various customizations:

1. Single Select

Use the UnpopularSelect component to select a single option from a list.

Select...▼

<UnpopularSelect
  options={options}
  value={selectedOption}
  onChange={handleSingleSelect}
  style={styles.select}
/>

2. Multi-Select

Use the UnpopularSelect component to select multiple options.

Select...▼

 <UnpopularSelect
  options={options}
  value={selectedOptions}
  onChange={handleMultiSelect}
  multiSelect
  style={styles.select}
/>

3. Searchable Dropdown

Enable search functionality with the searchable prop.

Select...▼

 <UnpopularSelect   
  options={options}
  value={selectedOption}
  onChange={handleSingleSelect}
  searchable
  style={styles.select}
/>

4. Async Loading

Load options asynchronously with the asyncLoad and loadOptions props.

Select...▼

 <UnpopularSelect 
  options={[]}
  value={selectedOption}
  onChange={handleSingleSelect}
  asyncLoad
  loadOptions={asyncLoadOptions}
  style={styles.select}
/>

5. Custom Rendering

Customize the rendering of options and selected values using the renderOption and renderSelected props.

Select...▼

 <UnpopularSelect
  options={options}
  value={selectedOption}
  onChange={handleSingleSelect}
  renderOption={renderCustomOption}
  style={styles.select}
/>

Disabled State

Disable the dropdown with the disabled prop.

Select...▼

Styling

The UnpopularButton component comes with default styling but allows you to customize its appearance through props and inline styles. You can adjust colors, border radius, font size, and padding to fit your design needs.