@lemonadejs/dropdown NPM

LemonadeJS Dropdown

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.

Features

Lightweight: The JavaScript Dropdown is only about 2 KBytes;
Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/dropdown

CDN

To use Dropdown via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />

Usage

Quick example with Lemonade

import Dropdown from '@lemonadejs/dropdown';
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const self = this;

    self.data = [
        { text: "Red", value: 1 },
        { text: "Blue", value: 2 },
        { text: "Green", value: 3 },
        { text: "Yellow", value: 4 },
        { text: "Purple", value: 5 },
        { text: "Gray", value: 6 },
    ]

    return `<div>
        <Dropdown :data="self.data" :value="1" />
    </div>`
}

Quick example with React

import React, { useRef } from 'react';
import Dropdown from '@lemonadejs/dropdown/dist/react';
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css';

const data = [
    { text: "Red", value: 1 },
    { text: "Blue", value: 2 },
    { text: "Green", value: 3 },
    { text: "Yellow", value: 4 },
    { text: "Purple", value: 5 },
    { text: "Gray", value: 6 },
]
export default function App() {
    const dropdown = useRef();
    return (
        <div>
            <Dropdown data={data} ref={dropdown} value={1} />
        </div>);
}

Quick example with Vue

<template>
    <Dropdown :data="data" :value="1" />
</template>

<script>
import Dropdown from '@lemonadejs/dropdown/dist/vue'
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { text: "Red", value: 1 },
                { text: "Blue", value: 2 },
                { text: "Green", value: 3 },
                { text: "Yellow", value: 4 },
                { text: "Purple", value: 5 },
                { text: "Gray", value: 6 },
            ]
        };
    },
}
</script>

Settings

Attribute	Description
data: Item[]	An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section.
multiple?: boolean	If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously.
autocomplete?: boolean	If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown.
value?: string	Represents the current value or selected option in the Dropdown.
type?: string	Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance.
insert?: boolean	Enables the `insert` feature, allowing users to add a new option directly by typing the title text and clicking on the plus symbol.
format?: number	Data format type, usually in the form of { id: name } or { value: text }
width?: number	Specifies the width of the dropdown.
placeholder?: string	Placeholder text to guide users in the dropdown.
url?: string	Specifies the URL for fetching the data. Do not declare the `data` attribute for the url to function properly.

Item Details

Attribute	Description
value?: number or string	Represents the identifier or unique value associated with the option.
group?: string	Indicates the group to which the option belongs, allowing for segregation and organization.
text?: string	Displays the label or text associated with the option.
image?: string	Specifies the image URL to be displayed alongside the option.
synonyms?: string[]	Keywords for easier item identification
disabled?: boolean	Indicates whether the item is currently disabled
color?: string	Specifies the color associated with the item

Events

Event	Trigger
onclose?: () => void	Invoked when the dropdown modal is closed.
onbeforeinsert?: (instance, Item) => void	Invoked before an item is added to the options through the insert feature.
oninsert?: (instance, Item) => void	Invoked after an item is added to the options through the insert feature.
onchange?: (instance, Item) => void	Invoked when the value changes.
onload?: (instance, Item) => void	Invoked when appended to the DOM.
onsearch?: (instance, Item) => void	Invoked when searching for an item.
onbeforesearch?: (instance, Item) => void	Invoked before initiating a search.
onopen?: (instance) => void	Invoked when the dropdown is opened.