@belong-ui/select-dropdown

#### Examples:

Use this component for

1. Placing a dropdown (For Navigation or Preferences Selection)
2. Selecting a single value from options in form input.

``js initialState = { selectedItem: null, selectedFruits: [], };

const suggestions = ['apple', 'orange', 'banana'];


  onSelect={(newValue) => {
    setState({ selectedItem: newValue });
  }}
  items={suggestions}
  renderSelectedItem={() => (
    state.selectedItem ? state.selectedItem : (Select Fruit)
  )}
/>





Disabled Dropdown



  isDisabled
  onSelect={(newValue) => {
    setState({ selectedItem: newValue });
  }}
  items={suggestions}
  renderSelectedItem={() => (
    state.selectedItem ? state.selectedItem : (Disabled Select Dropdown)
  )}
/>





Custom Rendering



  onSelect={(newValue) => {
    if (state.selectedFruits.indexOf(newValue) !== -1) {
      setState({ selectedFruits: state.selectedFruits.filter((fruit) => (fruit !== newValue)) })
    } else {
      setState({ selectedFruits: [...state.selectedFruits, newValue] });
    }
  }}
  items={suggestions}
  renderSelectedItem={() => (
    state.selectedFruits.length ?

${state.selectedFruits.length} fruits selected

 : (Select Fruits)
  )}
  renderItem={(item, index) => (
    
      {state.selectedFruits.indexOf(item) !== -1 ?  : } {item}
    
  )}
/>





Usage as input (e.g. for forms)



  className="styleguidist__dropdown"
  isInput
  onSelect={(newValue) => {
    setState({ selectedItem: newValue });
  }}
  items={suggestions}
  renderSelectedItem={() => (
    state.selectedItem ? state.selectedItem : (Select Fruit)
  )}
/>





Usage as input (Disabled)



  className="styleguidist__dropdown"
  isInput
  isDisabled
  onSelect={(newValue) => {
    setState({ selectedItem: newValue });
  }}
  items={suggestions}
  renderSelectedItem={() => (
    state.selectedItem ? state.selectedItem : (Select Fruit)
  )}
/>

#### Examples:

Use this component for

1. Placing a dropdown (For Navigation or Preferences Selection)
2. Selecting a single value from options in form input.

``js initialState = { selectedItem: null, selectedFruits: [], };

const suggestions = ['apple', 'orange', 'banana'];

onSelect={(newValue) => { setState({ selectedItem: newValue }); }} items={suggestions} renderSelectedItem={() => ( state.selectedItem ? state.selectedItem : (Select Fruit) )} /> Disabled Dropdown isDisabled onSelect={(newValue) => { setState({ selectedItem: newValue }); }} items={suggestions} renderSelectedItem={() => ( state.selectedItem ? state.selectedItem : (Disabled Select Dropdown) )} /> Custom Rendering onSelect={(newValue) => { if (state.selectedFruits.indexOf(newValue) !== -1) { setState({ selectedFruits: state.selectedFruits.filter((fruit) => (fruit !== newValue)) }) } else { setState({ selectedFruits: [...state.selectedFruits, newValue] }); } }} items={suggestions} renderSelectedItem={() => ( state.selectedFruits.length ?${state.selectedFruits.length} fruits selected: (Select Fruits) )} renderItem={(item, index) => ( {state.selectedFruits.indexOf(item) !== -1 ? : } {item} )} /> Usage as input (e.g. for forms) className="styleguidist__dropdown" isInput onSelect={(newValue) => { setState({ selectedItem: newValue }); }} items={suggestions} renderSelectedItem={() => ( state.selectedItem ? state.selectedItem : (Select Fruit) )} /> Usage as input (Disabled) className="styleguidist__dropdown" isInput isDisabled onSelect={(newValue) => { setState({ selectedItem: newValue }); }} items={suggestions} renderSelectedItem={() => ( state.selectedItem ? state.selectedItem : (Select Fruit) )} />