React-fancy-select NPM

react-fancy-select

So you want a styled select box?

Your designer has supplied you with a awesome looking select / dropdown list, not knowing that we still can't style native selects nicely.

Solution

With react-fancy-select, you're provided a custom implementation of a select / dropdown that you can style as much as you like.

Installation

npm i react-fancy-select

yarn add react-fancy-select

Usage

import React from "react";
import FancySelect from "react-fancy-select";
import "react-fancy-select/lib/react-fancy-select.css";

const items = [{
  id: 0,
  value: 'Apple',
  text: 'Apple',
}, {
  id: 1,
  value: 'Orange',
  text: 'Orange',
}, {
  id: 2,
  value: 'Pear',
  text: 'Pear',
}];

const Component = () => (
    <FancySelect
        items={items}
        onSelection={(item) => alert(`You selected ${item.text}`)}
    />
);

Props

Property	Type	Default	Description
`items`	array	undefined	array of items
`onSelection`	function	undefined	callback fires upon item selection with selected object as parameter
`useNative`	boolean	true	if true, positions and hides a select element on top of the component on mobile devices to trigger native select
`placeholder`	string	`Please select...`	placeholder text to display before selection
`name`	string	null	name to give to select element if being used in a form for requests
`defaultValue`	string	null	the default selected value

Styling

Property	Description
`.FancySelect__Control`	the visible select component wrapper
`.FancySelect__List`	the dropdown list
`.FancySelect__ListItem`	the dropdown list items
`.FancySelect__ListItem:hover`	the dropdown list items on hover
`.FancySelect__ListItem--focused`	the dropdown list items on focus (with keyboard arrows)

Todo

Write additional tests.
In-depth browser testing.

react-component select dropdown form react fancy

lodash prop-types

@infinitebrahmanuniverse/nolb-react-fa @everything-registry/sub-chunk-2554 @zalastax/nolb-react-fa

1.0.1

6 years ago

1.0.0

6 years ago