xxxxxxxxxx
One of the best React Library (Alternative of Select2 of JQuery Libray)
yarn add react-select
or
npm i --save react-select
Import the default export and render in your component:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)
xxxxxxxxxx
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)
xxxxxxxxxx
import React, { useState } from 'react'
export const FruitSelectDropdown = () => {
const [currentFruit, setCurrentFruit] = useState('oranges')
const changeFruit = (newFruit) => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
xxxxxxxxxx
import React, { useState } from 'react'
const ANIMALS = ['Dog', 'Cat', 'Lion', 'Elephant'];
export const Example = ()=>{
const [animal, setAnimal] = useState("");
return (
<div>
<form>
<label htmlFor="animal">
Animal:
<select
id="animal"
value={animal}
// value={animal} is to set default value just like 'selected' in html,
// every time component renders 'options' will be set to this value.
onChange={(e)=>{setAnimal(e.target.value)}}
>
<option>Select Option </option>
{ANIMALS.map((animal)=>(
<option key={animal}>{animal}</option>
))
}
</select>
</label>
</form>
</div>
)
}
xxxxxxxxxx
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) { this.setState({value: event.target.value}); }
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
xxxxxxxxxx
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'vanilla', label: 'Chocolate' },
{ value: 'vanilla', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)
xxxxxxxxxx
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)
xxxxxxxxxx
import { Select } from 'react-jsx-select';
<Select
options={[
{ value: 1, label: 1, jsx: <span>1</span> },
{ value: 2, label: 2, jsx: <span>2</span> },
{ value: 3, label: 3, jsx: <span>3</span> },
{ value: 4, label: 4, jsx: <span>4</span> },
{ value: 5, label: 5, jsx: <span>5</span> },
]}
onChange={(e) => console.log(e)}
name='sample'
placeholder='Select Please...'
defaultValue={2}
disabled={true}
required={false}
className='form-control'
listStyle={{
backgroundColor: '#fafafa',
border: '1px solid #ccc',
}}
activeItemStyle={{ backgroundColor: '#e0e000' }}
iconWidth='50'
iconStyle={{
fontSize: '26px',
borderRadius: '0 5px 5px 0',
}}
purpose='search'
onSearch={(e) => console.log(e)}
onExactSearch={(e) => console.log(e)}
/>;
xxxxxxxxxx
import { Select } from 'react-jsx-select';
<Select
options={[
{ value: 1, label: 1, jsx: <span>1</span> },
{ value: 2, label: 2, jsx: <span>2</span> },
{ value: 3, label: 3, jsx: <span>3</span> },
{ value: 4, label: 4, jsx: <span>4</span> },
{ value: 5, label: 5, jsx: <span>5</span> },
]}
onChange={(value) => console.log(value)}
/>;