Github

Awesome

React, Angular, Vue, and Typescript compatible selector

# Features

  • Custom Title
  • Searchable
  • Icon Support
  • Recent Selects
  • Custom Column Number
  • Dark/Light Theme
  • Custom Style
  • Navigation With Arrow Keys
  • Responsive Design
  • Dynamic HTML
  • Lightweight
  • Zero Dependency

# Installation

> step 1 : you can use either npm or yarn, or import the main file with the script tag.

# npm

# yarn

# html (download the selector.js file from the src directory)

> step 2 : include the package in your code:

# npm and yarn

> step 3 : start making selectors!

# Title

Set a custom title with the title parameter:

# Notice: If you enable the search, the title would be hidden.

If you set the isSearchable parameter to true, the search input would be enabled. you can also specify the search input placeholder with the searchPlaceholder parameter:

# Options Format

The format of the options list should be like this:

# It should be an array of objects with the name and id attributes

# Icon Support

You can add iconSrc and iconSize attributes to the option objects so your option would have an icon:

# The default value of the icon size is '17px auto'

# Current Option

You can highlight the current selected option via the currentOptionId parameter:

# Recent Selects

You can show the frequently selected option like this:

# Notice: format of the recent selects is the same as the options, except in recent selects you can't have icons.

# Column Number

You can customize the max column number via the maxColumns parameter:

# Notice: the final column number is the minimum between the screen size, the size of the options(in a similar 4:3 ratio), and your specified number.

# Theme

The default theme is light, but you can enable the dark theme with the theme parameter:

# Custom Style

The Awesome Selector's html markup is equivalent to below:

So you can apply your custom style in a form of an array of classes:

# On Select

When the user selects an option, the onSelect() function returns the selected option id and name: