JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q47974F
  • License ISC

Provides you with multiple dropdown components to use in your React app.

Package Exports

  • @tryferos/dropdown
  • @tryferos/dropdown/dist/index.cjs
  • @tryferos/dropdown/dist/index.mjs

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 (@tryferos/dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Dropdown Components

Install the package for npm here.

Source code on Github.

This is a react component delivering various Editable Dropdowns that you can use in your projects, which also adds types support using Typescript.

The project is build using React, Typescript and Tailwindcss. Tailwindcss is compiled into css, meaning you do not need it as a depedency.

All files are bundled into 3 seperate files for both cjs, esm and dts using the Rollup bundler. (commonjs, esmodules and declaration for ts types).

đŸŽ¯ Features

  • ✅ Typescript support
  • ✅ FULLY Customizable to your needs
  • ✅ Light/dark mode toggle
  • ✅ Search option
  • ✅ Animations option

🔌 Installation

Install @tryferos/dropdown using

  npm install @tryferos/dropdown@1.3.2

Remember that you need to have react and react-dom already installed

  npm install react@^18.0.1 react-dom@^18.0.1

This package is build using react 18, you can use with different versions of react at your own risk.

  npm install @tryferos/dropdown@1.3.2 --force

Import the components

import { SimpleDropdown, CategorizedDropdown } from "@tryferos/dropdown";

đŸ’Ŧ Options & Types

    title: string;
    animation?: {
        animate?: boolean;
        animateChildren?: boolean;
        delayPerChild?: 0.1 | 0.2 | 0.3 | 0.4 | 0.5;
        animateChildrenUntilIndex?: number;
    };
    maxHeight?: string;
    minWidth?: string;
    maxWidth?: string;
    darkMode?: boolean;
    rounded?: boolean;
    shadow?: boolean;
    size?: string; //in percentage without %
    openByDefault?: boolean;
    showTitleIfClosed?: boolean;
    search?: boolean;
    closeOnClickOutside?: boolean;
    placeholder?: string;
    onSearchChange?: (value: string) => void;
    closeOnSelect?: boolean;
    //For Simple Dropdowns
    items: Array<T>;
    onSelect: (item: T) => void;
    selected: T;
    //For Categorized Dropdowns
    categories: Array<{
        title: string;
        items: Array<{
            item: T;
            disabled?: boolean;
        }>;
    }>;
    selected: {
        item: T,
        category: {
            title: string;
        }
    }
    onSelect: ({item: T, category: {title: string}}) => void

ℹī¸ Acknowledgements