https://github.com/seatgeek/react-select-option

A plain <select> component that can be styled.
https://github.com/seatgeek/react-select-option

Last synced: 3 months ago
JSON representation

A plain <select> component that can be styled.

• Host: GitHub
• URL: https://github.com/seatgeek/react-select-option
• Owner: seatgeek
• Created: 2016-02-19T21:47:03.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-04-11T19:11:29.000Z (about 7 years ago)
• Last Synced: 2025-02-04T12:44:58.778Z (4 months ago)
• Language: JavaScript
• Size: 137 KB
• Stars: 8
• Watchers: 11
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-select-option

## Usage

Importing this library yields an object with two keys, `Select` and `Option`, roughly corresponding to the HTML `` and ``.

## Styling

Styling of this component can be done through Javascript or CSS. However, Javascript styles are currently required to style the select container as well as the options container style.

Much of the rendering is done through a series of functional rendering delegates, which are functions that the Select component calls every time it needs to know how to render parts of the Select, such as each ``. These delegates are provided with arguments passed in to it by the component indicating the current state of the component.

The delegate for the `` displaying child should be provided as a function to the `displayingChildRenderer` prop of the Select. This is provided three arguments, in this order:

`child`, the `Option` node to render

`isExpanded`, whether the component is in an expanded state

`isFocused`, whether the select is focused

Each `` also takes a functional rendering delegate as its child. This delegate is provided with three options,

`isHovering`, whether we are hovering over an element without having selected it, whether with the keyboard or the mouse

`isActive`, whether the mouse is currently down on the element, causing an active state to be produced

`isSelected`, whether the element is the currently selected one

There may be efficiency concerns here, but in this first iteration there are no overly serious inefficiencies. When the component first mounts each `` renders, but after that an `` renders only when it is involved in a state change. For example, if you hover from one element to another, the leaving element re-renders and the entering element re-renders.

Currently, the `displayingChildRenderer` is the most inefficient of the bunch, and re-renders each time the menu is opened and closed, which might perhaps be fixed shortly.

## Hastily Inserted Example

```

 {

                  return 
{child}
;

                }

              }

               style={{

                optionsContainerStyle: {

                  border: '1px solid #f0f'

                }

               }}>

  {exampleConstants.data.map((d, i) => {

    return 

      {(hover, active, selected) => {

        return 


          {d.label +

          (hover ? exampleConstants.HOVERING_SYMBOL : '') +

          (active ? exampleConstants.ACTIVE_SYMBOL : '') +

          (selected ? exampleConstants.SELECTED_SYMBOL : '')}

        
;

      }}

    ;

  })}


```

## Releasing

To release, run `npm run build`, `npm version `, and then `npm publish ./`.

## Tests

To run tests, use `npm run nightwatch`. You should have a Selenium server running and the example running on port 8000, which you can do by running `npm run start`.