JSPM – @syncfusion/react-dropdowns@32.1.19

Package Exports

@syncfusion/react-dropdowns
@syncfusion/react-dropdowns/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@syncfusion/react-dropdowns) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

The Syncfusion React Dropdowns package is a feature-rich UI collection for dynamic dropdown interactions in React apps.

Setup

To install dropdowns and its dependent packages, use the following command,

npm install @syncfusion/react-dropdowns

The Dropdown List component provides a user-friendly interface for selecting a single option from a list of predefined values. It supports rich customization, filtering, and templating features, making it ideal for forms, data filtering, and guided user selections.

Key features

Primitive Data Binding: Bind the Dropdown List to simple arrays of strings or numbers for straightforward use cases without complex data structures.
Grouping: Organize Dropdown List items into logical categories using the groupBy property, improving navigation and discoverability in large datasets.
Filtering: Enable the filterable property to allow users to search and narrow down options dynamically, with real-time updates to the list as they type.
Grouping with Filtering: Combine grouping and filtering to enhance usability, especially when dealing with extensive or categorized data.
Templates: Customize the Dropdown List appearance using various template options:
- Item Template: Use itemTemplate to style individual items or display additional information.
- Header Template: Add custom content at the top of the Dropdown List using headerTemplate.
- Footer Template: Include extra information or actions at the bottom using footerTemplate.
- Value Template: Style the selected value using valueTemplate for a personalized display.
Label Mode: Control how labels or placeholders appear with the labelMode property. Available modes include Never, Always, and Auto.
Sorting: Control item order using the sortOrder property.
Popup Customization: Configure popupSettings (width, height, zIndex, position, offset, collision).
Clear Button: Show a clear icon to reset selection via clearButton.
Sizes and Variants: Adjust UI with size (Small, Medium, Large) and variant (Standard, Outlined, Filled).

Usage

import { DropDownList } from '@syncfusion/react-dropdowns';

const data = [
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' }
];

export default function App() {
  return (
    <DropDownList
      id="fruits"
      dataSource={data}
      fields={{ text: 'text', value: 'value' }}
      placeholder="Select a fruit"
    />
  );
}

Trusted by the world's leading companies

Support

Product support is available through following mediums.

Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

@syncfusion/react-dropdowns