How to use react-select - 10 common examples

input: base => ({
        ...base,
        color: theme.palette.text.primary,
        "& input": {
          font: "inherit"
        }
      })
    };

    return (
      
        {console.log("TICKER IS", this.state.stockTicker)}
        <div style="{{">
          <select value="{this.state.stockTicker}" list="">
        

        
          
            
              Selected Stock
            
          
</select></div>

}
      })
    };

    return (
      
        {console.log("CLOSING PRICE ", this.state.yAxisData_StockClosingPrice)}
        
          
            <div>
              <div>
                <select value="{this.state.stockTicker}" list="">
              
              
                
                    value
                      ? [
                          /\d/,
                          /\d/,
                          "/",</select></div></div>

// null so that `placeholder` can be used to name what this component can filter when there's
// no value selecting, saving horizontal space.
export default function SimpleFilterSelect(props) {
  const {style, value} = props;
  return (
    <select placeholder="" value="{value" style="{{width:">
  );
}
SimpleFilterSelect.propTypes = {
  ...Select.propTypes,
  value: PropTypes.string.isRequired
};
</select>

if (required) {
    inputNote = <span>required</span>;
  }

  let reactSelectClasses = cssClass.REACT_SELECT;
  if (readOnly) {
    reactSelectClasses += ` ${cssClass.READ_ONLY}`;
  }

  let SelectComponent = ReactSelect;
  if (creatable &amp;&amp; lazy) {
    SelectComponent = ReactSelect.AsyncCreatable;
  } else if (creatable) {
    SelectComponent = ReactSelect.Creatable;
  } else if (lazy) {
    SelectComponent = ReactSelect.Async;
  }

  // The label container must be returned after the ReactSelect otherwise it does not get displayed
  // in the browser.
  return (
    <div>
      <div id="{id}">
        </div></div>

font: "inherit"
        }
      })
    };

    return (
      
        
          
            <div>
              <div>
                <select value="{this.state.stockTicker}" list="">
              
              
                
                    value
                      ? [
                          /\d/,
                          /\d/,
                          "/",</select></div></div>

const selectChildProps = {
      components: {
        ClearIndicator: null,
        IndicatorSeparator: null,
        MultiValueRemove: TagRemovalIcon,
      },
      id: 'subject-area-container',
      inputId: 'subject-area-select',
      isMulti: true,
      name,
      onBlur,
      onChange: this.handleChange,
      options: eLifeOptions,
      styles: this.customReactSelectStyles,
      value: selectedOptions,
      filterOption: createFilter({
        matchFrom: 'start',
      }),
    }

    return (
      
        {/* htmlFor matches with react-select's inputId, which applies the correct id to the internal sub-component */}
        {/* eslint-disable-next-line jsx-a11y/label-has-for */}
        <label>
          {label}
          {isOptional &amp;&amp; ' (optional)'}
        </label>
        {!hasReachedMultiselectLimit &amp;&amp; <select>}
        {hasReachedMultiselectLimit &amp;&amp; (
          
            </select>

correlations: filterData(filterState, correlations),
      });
    };
    return (
      <div>
        <select> _.toLower(o.value))}
          getOptionLabel={_.property("value")}
          getOptionValue={_.property("value")}
          value={this.state[prop]}
          onChange={onChange}
          noOptionsText={() =&gt; "No columns found"}
          isClearable
          filterOption={createFilter({ ignoreAccents: false })} // required for performance reasons!
        /&gt;
      
    );
  }
</select></div>

import { Color } from '../colors';
import { Icon, IconName } from '../icons';
import * as React from 'react';
import { getSpace, SpaceSize } from '../space';
import styled from 'styled-components';

const ReactSelect = require('react-select').default;

const StyledChevron = styled(Icon).attrs({ name: IconName.ArrowFillRight })`
	color: ${Color.Black};
	fill: ${Color.Grey60};
	width: 12px;
	height: 12px;
	padding: ${getSpace(SpaceSize.XS) + getSpace(SpaceSize.XXS)}px;
	transform: rotate(90deg);
	transform: rotate(90deg);
`;

// tslint:disable-next-line:no-empty
const NOOP = () => {};

export const ChevronIcon: React.SFC = props => ;

const Select = React.memo(({
    value = null,
    label = null,
    options = [],
    disabled = false,
    onSetValue = defaultOnSetValue
  } = {}) => {
  const callbackRef = useRef(onSetValue)
  
  useEffect(() => {
    callbackRef.current = onSetValue
  }, [onSetValue])
  
  return h([ReactSelect.default, {
    options,
    value,
    placeholder: label,
    onChange: callbackRef.current,
    isDisabled: disabled,
    //menuIsOpen: true,// useful to debug
    isSearchable: false,
    menuPlacement: 'auto',
    menuPosition: 'fixed',
    className: 'select',
    classNamePrefix: 'select'
  }])
})

function DropdownIndicator(props: *) {
  const iconWrapperCx = cx(styles.dropdown_icon_wrapper, {
    [styles.flipped]: props.selectProps.menuIsOpen,
  })

  return (
    components.DropdownIndicator && (
      
        <div>
          
        </div>
      
    )
  )
}
// custom Menu (options dropdown) component