tiny-dropdown v1.0.0

tiny-dropdown -- React

A simple, customizable, light-weight dropdown component built with love using React.

This project was bootstrapped with Create React App & Storybook.

Live demo here: https://rehman-00001.github.io/tiny-dropdown

Installation

npm install tiny-dropdown or yarn add tiny-dropdown

Usage

import TinyDropdown from 'tiny-dropdown';

Data type - Strings :

const options = [ 'Google', 'Microsoft', 'Amazon', 'Facebook', 'Twitter', 'Uber' ];
<TinyDropdown
    options={options}
    onSelect={(option, selectedIndex) => alert(option, selectedIndex)}
    placeHolder="Select a company"
    visibleOptions={4}
    selectedIndex={2}
/>

Data type - Objects :

const options = [
{
  key: 'option-1',
  value: 'United States'
},
{
  key: 'option-2',
  value: 'Russia'
},
{
  key: 'option-3',
  value: 'India'
},
{
  key: 'option-4',
  value: 'China'
}]

<TinyDropdown
    options={options}
    label={option => option.value}
    onSelect={(option, selectedIndex) => alert(option, selectedIndex)}
    placeHolder="Select your country"
    visibleOptions={3}
    selectedIndex={2}
/>

Properties

placeHolder - Placeholder text for the dropdown. By default it shows: "Select an option".

options - An array of options for the dropdown menu. Items can either be Strings or Objects. In case of objects, the property "label" is mandatory.

label - A function which is executed on every object in "options" array. Returned value is a string representing that object is shown in the UI.

selectedIndex - If any option has to be selected initially, pass the index of that option as "selectedIndex". It will be marked as selected.

onSelect() - A handler function which will be called when user selects any option from the dropdown menu. Input parameters: selectedOption, selectedIndex.

visibleOptions - Defines the number of options that are visible without the need of scrolling down. By default 8 items are visible.

panelOnly - If set to true, expanding the panel just hides the dropdown button. Only the options panel is displayed.

cssOverrides - Specifies the styles to be overridden. It has 4 sub-properties:

  dropdownButton - Overrides the styles for dropdown itself.
  dropdownPanel - Overrides the styles for the dropdown popup panel.
  dropdownOption - Overrides the styles for every single option in the popup panel.
  dropdownOptionSelected - Overrides the styles for selected option in the popup panel.

Features Planned

Add support to customize CSS styles Fitler support for options Custom HTML for options Load data from ajax Selected element styles CSS animations & Much more to come