I use react-select for a multi selection dropdown. By default, react-select displays labels inside an input. I would like to replace this input with a simple button (without any labels or anything fancy...just a simple button). The button would popup the dropdown.
I can't find how to modify the input.
Here is my default select:
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} isMulti />
)
Related
React Native Dropdown Picker is the most popular library to implement a dropdown in React Native. But in the library, I could not find a way to customize the dropdown arrow and the ticks in the dropdown list. They are by default in black color and cannot be customized with my knowledge.
Basic implementation:
import DropDownPicker from 'react-native-dropdown-picker';
function App() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{ label: 'ice-cream', value: '1' },
{ label: 'strawberry', value: '2' },
{ label: 'grapes', value: '3' },
{ label: 'fruit salad', value: '4' },
{ label: 'jello', value: '5' },
{ label: 'apple', value: '6' },
]);
return (
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
);
}
Sample Output:[Click here to see the output]2
There is a prop in the called arrowIconStyle. But for that also, I could not find a way to give a color as a style.
Ex: arrowIconStyle={{color: 'white'}}
Unfortunately this does not work and gives an error:
Type '{ color: string; }' is not assignable to type
'StyleProp'.ts(2322)
Can someone please help me regarding this?
Thank you.
try to change the arrow icon and implement your own styles for the icon
like the following:
https://snack.expo.dev/#hewr/57a779
//to change the dropdown box style
dropDownContainerStyle={{
backgroundColor: "#dfdfdf"
}}
// to style the selected item style
selectedItemContainerStyle={{
backgroundColor: "grey"
}}
for more details visit their website
and check the Dropdown and List and Items sections
I want to create react-select that when user type text, it will show filtered options whose part of match texts are underlined and change color from black to red as provided below image. Is it possible? Thanks.
After a while, I get the answer :)
import Select, { components } from 'react-select';
const options1 = [
{
value: 'chocolate',
label: 'chocolate',
},
{
value: 'strawberry',
label: 'strawberry',
},
{
value: 'vanilla',
label: 'vanilla'
}
]
class MyOption extends React.Component {
f_search = (input,option) => {
const num = option.indexOf(input)
const len = input.length
return (
<div>
<span>{option.substr(0, num)}</span>
<span style={{color:"red", textDecoration: "underline"}}>{input}</span>
<span>{option.substr(num +len)}</span>
</div>
)
}
render() {
const input = this.props.selectProps.inputValue
const option = this.props.data.label
return (
<components.Option {...this.props}>
{this.f_search(input,option)}
</components.Option>
)
}
}
const ReactSelect7 = () =>
<Select options={options1} components={{ Option: MyOption }} />
I am using react material-table. I am in need of a feature like this: I use remote data mode to get a list of records, then I use the custom column rendering function to add a Material Button at the end of each row in the table, When the user presses this button I want it to be hidden. How can I do that. I look forward to receiving your help.
This is the illustration image
I made this example, on button click it gets disabled and a variable is set to to a loading state:
The key aspect here is to define something that identifies the row that is being updated. I use an extra column on which you could also display a spinner component:
{
field: "isUpdating",
render: (rowdata) =>
fetchingClient === rowdata.name
? "loading.." // Add your <Spinner />
: null
},
Since you want to render the button as a custom column (other way could be using actions), on the render attribute of that column, you can use rowdata parameter to access what you are looking for:
{
field: "join",
sorting: false,
render: (rowdata) => (
<button
disabled={fetchingClient === rowdata.name}
onClick={(event) => fetchDataFromRemote(rowdata.name)}
>
Go fetch
</button>
)
}
Here is the link to the sandbox and the complete code, I hope this works for you!
import React, { Fragment, useState } from "react";
import MaterialTable from "material-table";
export default function CustomEditComponent(props) {
const [fetchingClient, setFetchingClient] = useState("");
const fetchDataFromRemote = (clientName) => {
console.log(clientName);
setFetchingClient(clientName);
};
const tableColumns = [
{ title: "Client", field: "client" },
{ title: "Name", field: "name" },
{
field: "isUpdating",
render: (rowdata) =>
fetchingClient === rowdata.name
? "loading.." // Add your <Spinner />
: null,
},
{
field: "join",
sorting: false,
render: (rowdata) => (
<button
disabled={fetchingClient === rowdata.name}
onClick={(event) => fetchDataFromRemote(rowdata.name)}
>
Go fetch
</button>
),
},
];
const tableData = [
{
client: "client1",
name: "Jasnah",
year: "2019",
},
{
client: "client2",
name: "Dalinar",
year: "2018",
},
{
client: "client3",
name: "Kal",
year: "2019",
},
];
return (
<Fragment>
<MaterialTable
columns={tableColumns}
data={tableData}
title="Material Table - custom column "
options={{ search: false }}
/>
</Fragment>
);
}
So I've been looking for a dropdown picker to be toggled on "on Press" since yesterday yet I found nothing, all I want is to put an icon in a "touchable Opacity", and when pressed the dropdown picker shows.
I've been advised to use "react-native-picker-select" library, I imported it and added the usage advised by the library like this
const Dropdown = () => {
return (
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
); };
then I called it from the "on Press" but its showing nothing, so what am I missing?
I think you are trying to call whole element on pressing the button, but there is no need to do that because react-native-picker-select by default supports on press focus which you want. While native 'Picker' from 'react-native' does not support that.
So, you can add this directly like a View or TouchableOpacity.
For example:
const App = () => {
return (
<View />
<RNPickerSelect />
...
);
}
In react-select https://github.com/jedwatson/react-select , can we remove one of selected option in react-select programmatically?
E.g in the below screenshot I would like to unselectred programmatically?
Many thanks!
You can save selected options in state and remove selected one by update new state, you can check here codeSandBox
import React, { useState } from "react";
import "./styles.css";
import Select from "react-select";
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
export default function App() {
const [selectedOption, setSelect] = useState(null);
const handleChange = selectedOption => {
setSelect(selectedOption);
};
const removeOption = e => {
const newSelect = selectedOption.filter(
item => item.value !== e.target.name
);
setSelect(newSelect);
};
return (
<>
<Select
isMulti
value={selectedOption}
onChange={handleChange}
options={options}
/>
<button name="chocolate" onClick={removeOption}>
Remove Chocolate
</button>
<button name="vanilla" onClick={removeOption}>
Remove Vanilla
</button>
<button name="strawberry" onClick={removeOption}>
Remove Strawberry
</button>
</>
);
}