React select drop down with tiles items

by React

React-Select-Tile

The Select control for React.

View demo View Github

Installation and usage

The easiest way to use react-select-tile is to install it from npm and build it into your app with Webpack.

yarn add react-select-tile

or

npm install react-select-tile

Then use it in your app:

import React from "react";
import Select from "react-select-tile";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const App = () => {
  const [value, setValue] = React.useState("");

  const handleItemClick = value => {
    setValue(value);
    console.log(`Option selected:`, value);
  };

  return (
    <Select
      placeholder="Please select ..."
      value={value}
      options={options}
      onItemClick={handleItemClick}
    />
  );
};

Props

Common props you may want to specify include:

  • onInputChange - subscribe to change events
  • options - specify the options the user can select from
  • placeholder - change the text displayed when no option is selected
  • value - control the current value
  • onItemClick - subscribe to menu item click events
  • onMenuClose - will be called when the menu is closed
  • onMenuOpen - will be called when the menu is opened
  • menuIsOpen - determines weather menu should be opened or not (default = false)
  • containerClassName - root element class
  • containerStyle - root element style
  • inputClassName - input element class
  • inputStyle - input element style
  • menuClassName - menu items container class
  • menuStyle - menu items container style
  • menuItemClassName - menu item class
  • menuItemStyle - menu item style
  • activeItemClassName - active menu item class
  • activeItemStyle - active menu item style
  • iconClassName - Chevron icon class
  • iconStyle - chevron icon style
  • emptyComponent - element to display when there are no options
  • menuComponent - element to display as menu items container
  • menuItemComponent - element to display as menu item,
  • openAnimationDelay - animation duration (default = 300)
  • menuItemColumns - number of menu item columns (default = 4)
  • menuItemWidth - menu item width (default = 120px)
  • menuPosition - where menu should be opened. either "top" or "bottom" (default = "bottom")
  • placeholder - input placeholder (default = "")

Controllable Props

You can control the following props by providing values for them. If you don't, react-select will manage them for you.

  • value / onChange - specify the current value of the control
  • menuIsOpen / onMenuOpen / onMenuClose - control whether the menu is open

Run Demo Locally

npm run demo

Then open the browser and navigate to http://localhost:5555

GitHub