react-select

How to style react-select options

由 耗尽温柔 提交于 2019-12-08 23:08:29
问题 What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options? I can target the select itself just fine, with something like: ... import Select from 'react-select' ... const styles = { fontSize: 14, color: 'blue', } <Select options={[1,2,3,4]} placeholder={'Select something'} clearable={false} style={styles.select} /> The problem is, the actual options when the select is expanded remain styled as the default. How can I target these options for

How to import from React-Select CDN with React and Babel?

由 纵然是瞬间 提交于 2019-12-07 11:14:05
问题 I've created a react application following the steps on the React Website, but I'm having issues utilizing the React-Select Library (particularly the Select Component). I can only use cdn files to load dependencies, including the React-Select cdn file located on cdnjs https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js I'm getting the following error with my react-app: ReferenceError: Select is not defined[Learn More] See below for my script and here for my codepen <html

How can I work with just values in react-select onChange event and value prop?

由 陌路散爱 提交于 2019-12-06 21:07:40
I try to use react-select in my reactjs app, but I have a problem with the onChange event. onChange is supposed to send two arguments. The first is supposed to be the selected value, but instead of the selected value, the whole option item is passed as the selected value. For instance I have an array of option items like options=[{ id: '1', name: 'A'},{ id: '2', name:'B'}] I set getOptionValue = (i) => i.id; and getOptionLabel = (i)=>i.name; When select the second item onChange(value) is passed the second option as the value argument ( {id:'2',name:'B'} ) instead of the value of the second

Rotate arrow indicator in React-select v2

由 北慕城南 提交于 2019-12-06 10:23:04
I'm using React Select v2 in my project with Styled Components and I need to be able to turn the arrow indicator upside down when the menu is open, which was supported in v1. I kinda managed to do it by doing this: css` &.react-select__control--is-focused { & .react-select__indicators { & .react-select__dropdown-indicator { transform: rotate(180deg); } } } `; Problem is that, if I press the arrow to open the menu and click on it again to close it, the arrow stays upside down because the select is still focused, which feels a bit weird in terms of UIX. Is there a proper way to rotate it based

Add an icon before the input element in react-select

由 ぃ、小莉子 提交于 2019-12-06 06:08:52
I am trying to add an icon in front of the input element of react select. I am able to get the icon in placeholder but the problem with a placeholder is that when I select some data from the dropdown the placeholder icon gets removed. I need some help to get the icon in front of the Select statement. Here's the code of what I have achieved till now import React, { Component } from 'react' import Select, { components } from 'react-select' export default class InfluencersForm extends Component { constructor(){ super(); this.handleInfluencerName = this.handleInfluencerName.bind(this); }

How to import from React-Select CDN with React and Babel?

由 感情迁移 提交于 2019-12-05 17:03:27
I've created a react application following the steps on the React Website , but I'm having issues utilizing the React-Select Library (particularly the Select Component). I can only use cdn files to load dependencies, including the React-Select cdn file located on cdnjs https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js I'm getting the following error with my react-app: ReferenceError: Select is not defined[Learn More] See below for my script and here for my codepen <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/react@15.0.0/dist/react-with-addons.min

React Select auto size width

由 ♀尐吖头ヾ 提交于 2019-12-04 22:18:50
问题 When using react-select it is not auto sizing by option value, but using width:100% as you can see in picture: Options are short: getOptions() { return [ { value: 'AND', label: 'AND' }, { value: 'OR', label: 'OR' } ] } And code which produces it: <Select options={this.getOptions()} value={value} autosize={true} clearable={false} simpleValue /> Is there any way to make react-select to show these values with auto sizing, so select box would be the same as option length, and I could, for example

How to use Select2 with Reactjs?

由 霸气de小男生 提交于 2019-12-04 02:53:54
I have dependent fields like this <List> <select> <option></option> <option></option> </select> <select> <option></option> <option></option> </select> <input /> </List> If I had 5 <List/> components.How do I add Select2 to each component.I googled online.But couldn't find any working solution. Code below for react-select .Getting error TypeError: event.target is undefined . var React = require('react'); var ReactDOM = require('react-dom'); var Select = require('react-select'); var Page = React.createClass({ getInitialState: function () { return { firstValue: '' } }, handleFirstLevelChange :

How to reduce the size of React Select in v2

由 假如想象 提交于 2019-12-03 13:08:22
The new v2 react-select control is great, but by default is too large. Is there a (preferably) simple way to reduce the height to the same as a standard select control (using Bootstrap v3)? Evan Hennessy React-Select v2 uses emotion CSS-in-JS so the new way to control style over the select components and sub-components is by passing a style object to the styles prop. You can also set a className to style with an external stylesheet. More/Better Info HERE CSS-in-JS way const customControlStyles = base => ({ height: 50, }); <Select ... styles={control: customControlStyles} ... /> CSS Way <Select

Conditional API call and send data in react-select

由 有些话、适合烂在心里 提交于 2019-12-02 10:11:21
import React, { Component} from 'react'; import Select from 'react-select'; import 'react-select/dist/react-select.css'; const partsType = [ {value: 'front_parts', label: 'Part Condition-Front'}, {value: 'left_parts', label: 'Part Condition-Left'}, {value: 'back_parts', label: 'Part Condition-Back'}, {value: 'right_parts', label: 'Part Condition-Right'}, {value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'}, {value: 'glass', label: 'Glass Condition'}, {value: 'electrical_parts', label: 'Electrical Parts'}, {value: 'non_electrical_parts', label: 'Non-Electrical Parts'} ]; const
订阅 react-select