Components

bySeaGit

UI Components

Back to SeaGit
SeaGit · Your AWS accountTry it free

React Dropdown Component

Feature-rich dropdown component with search, multi-select, keyboard navigation, and API integration support.

Quick Start

1. Import:

import Dropdown, { DropdownType } from '@/components/Dropdown';

2. Basic usage:

const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
];

<Dropdown
  type={DropdownType.Select}
  options={options}
  items_selected={selected}
  onChange={(value) => setSelected(value)}
/>

Select Dropdown with API Integration

Dropdown that fetches options from an API endpoint and merges with local options

Full-width Select Dropdown

Select dropdown with divider and custom width

Filter Dropdown

Multi-select filter dropdown with checkboxes and custom alignment

Profile Dropdown

User profile dropdown with avatar, custom content label, and menu items

Switch Account Dropdown

Select dropdown with images/icons for each option

Notification Dropdown

Dropdown with custom notification items and badge indicator

Help Center Dropdown

Menu dropdown with icon items and custom styling

Quick Selection Dropdown

Inline menu dropdowns for sorting and quick actions

Sort by

Select Dropdown from REST API

Uses apiUrl with labelProp and valueProp to fetch users from jsonplaceholder.typicode.com/users. The Dropdown maps raw API response fields by name, so no client-side transform is needed.

Fetch on mount

Fetch on open (spinner)

Datepicker

Date picker built with flatpickr library