react-simplest-dropdown

This is simple dropdown component for react. It's responsible only for view representation.

Your responsibility is to set positioning, callbacks, handle open/close events. You can determine position by passing styles in containerStyle property - the most important to pass top and left style attributes.

How it looks like

Installation

npm install --save react-simplest-dropdown

Example

this is an example of usage (redux container)

import { connect } from 'react-redux'
import Dropdown from 'react-simplest-dropdown'
import { createAction } from 'redux-actions'
import { SET_ATTRIBUTE_VALUE } from '~/app/reducers/Design'

const dropdownAlignment = (el) => {
  let top = 0, left = 0, width = 0
  if (el.getBoundingClientRect) {
    const rect = el.getBoundingClientRect()
    const offset = document.getElementById('design') ? document.getElementById('design').parentNode.scrollTop : 0
    top = offset + rect.top - 45 + (document.body.scrollTop || 0)
    left = rect.left
    width = rect.width
  }
  return {top, left, width}
}

const mapStateToProps = (state) => {
  const d = state.autocomplete.attr_dropdown

  return {
    open: d.open,
    containerStyle: dropdownAlignment(d.el),
    values: d.values,
    meta: {attribute_id: d.attribute.id}
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    selectValue: (e, meta) => {
      dispatch(createAction(SET_ATTRIBUTE_VALUE)({attribute_id: meta.attribute_id, value: e.currentTarget.textContent}))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dropdown)

Properties

| property | type | default | description | |----------------|----------|---------|----------------------------------------------------------------------| | open | bool | | makes dropdown visible or hidden | | values | array | | these values are dropdown items | | containerStyle | object | | inline styles for container element | | itemStyle | object | | inline styles for item elements | | selectValue | function | | onclick item callback: onClick={(event) => selectValue(event, meta)} | | meta | object | | any object that passed to selectValue callback |

The best documentation

https://github.com/beornborn/react-simplest-dropdown/blob/master/src/index.js