How to make one option in react-select stick. (i.e: like position fixed, it will stay at the top even when we scroll through options in the drop-down)
Do you try to add css on react-select ?
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} style={{position: 'fixed !important'}} />
)
Kind regards,
Kilian GOËTZ.
Related
I am trying to create a form using antd-form-builder how can I make its select field searchable?
import React from 'react'
import { Form, Button } from 'antd'
import FormBuilder from 'antd-form-builder'
export default () => {
const [form] = Form.useForm()
const meta = {
columns: 2
fields: [
{ key: 'select', label: 'Select', widget: 'select', options: ['Apple', 'Orange', 'Banana'] },
]
return (
<Form form={form}>
<FormBuilder meta={meta} form={form} />
<Form.Item className="form-footer">
<Button htmlType="submit" type="primary">
Submit
</Button>
</Form.Item>
</Form>
)
}
Since each field in antd-form-builder is a widget, you can pass all the select props that for that particular by passing widgetProps as prop.
For example, to make select widget/field as searchable, you can pass showSearch: true.
const meta = {
columns: 2,
fields: [
{
key: "select",
label: "Select",
widget: "select",
options: ["Apple", "Orange", "Banana"],
widgetProps: { showSearch: true },
},
],
};
You can follow the antd documentation to check what type of props you can pass to select field.
Antd Select Props API
I am trying to make a react-select component but I keep running into an issue where if I change the high and width of the original react-select it throws everything else of center.
Here is the original react-select box code:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
export default function Example(){
return (
<Select options={options}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and a picture:
original react-select image
this is size of react-select box I want:
height: 20,
width: 118.5
modified react-select for correct height and width
as you can see it throws off the placement of the input box, placeholder, and icons.
Here is the code for the above image:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and this is how I have been trying to modify the component. This has gotten me somewhat close to the desired outcome but the input box sizing and icon placements are still off and sized weird:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
valueContainer: base => ({
...base,
height: 20,
minHeight: 20,
width:20,
alignItems: 'left',
}),
indicatorsContainer: base => ({
...base,
height: 20,
minHeight: 20,
alignItems: 'center',
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
react-select what I have been able to achieve with the posted code image 1
react-select what I have been able to achieve with the posted code image 2
I have been at this for hours and I just cannot seem to get everything to fit nice and neat into the react-select box when I resize it. Any help would be greatly appreciated.
I've been working with the React-Select component and have been using grouped options to display the groups of color and flavor along with their respective options to select from:
import React, { CSSProperties } from "react";
import Select from "react-select";
const colorOptions = [
"Red",
"Blue",
"Green",
"Yellow",
"Orange",
"Purple",
"Brown"
].map((o) => ({
value: o.replace(" ", "_").toLowerCase(),
label: o
}));
const flavorOptions = [
"Vanilla",
"Chocolate",
"Strawberry",
"Cookies"
].map((o) => ({
value: o.replace(" ", "_").toLowerCase(),
label: o
}));
const groupedOptions = [
{
label: "Colors",
options: colorOptions
},
{
label: "Flavors",
options: flavorOptions
}
];
export default () => (
<Select options={groupedOptions} onChange={(e) => console.log(e)} />
);
By doing this, we have the following data structure for groupedOptions:
label: "Flavors"
options: Array(4)
0: {label: "Vanilla", value: "vanilla"}
1: {label: "Chocolate", value: "chocolate"}
2: {label: "Strawberry", value: "strawberry"}
3: {label: "Cookies", value: "cookies"}
However, whenever the console log of the React-Select component activates for the OnChange of the selected value we are only provided this {value: "vanilla", label:"Vanilla"}
I was wondering what would be the best approach to attach the upper groupLabel (Colors or Flavors) to this object or to be able to pull out this value and remap it to appear like the following:
{
label: "Flavors"
options: {
value: "vanilla",
label: "Vanilla"
}
}
I tried using onChange to give me the value of the option I selected
and i get an error "TypeError: Cannot read property 'value' of undefined" what should i do?
import React, { useState,option } from 'react';
import Select from 'react-select'
export default function Change() {
const [category,setcat]=useState(20);
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
return(
<>
<Select onChange={(e)=>{setcat(e.target.value);}} value={options.value} options={options} />
<h1>result ={category}</h1>
</>
);
}
Here is the solution:
import React, { useState } from "react";
import Select from "react-select";
export default function Change() {
const [category, setCategory] = useState("Not select yet");
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
const handleChange = (selectedOption) => {
setCategory(selectedOption.value);
console.log(`Option selected:`, selectedOption);
};
return (
<>
<Select value={category} onChange={handleChange} options={options} />
<h1>result ={category}</h1>
</>
);
}
Visit to see live demo: CodeSandbox
I'm working with react-select and I want to customize only one option from the drop-down. Is there such an opportunity? I would like to do something like:
const CustomOption = ({ innerRef, innerProps, data }) => data.custom
? (<div ref={innerRef} {...innerProps} >I'm a custom link</div>)
: defaultOne //<--- here I would like to keep default option
<ReactSelect
components={{ Option: CustomOption }}
options={[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
{ custom: true },
]}
/>
Any thoughts how to achive that?
Your feeling is good, you can achieve your goal with the following way:
const CustomOption = props => {
const { data, innerRef, innerProps } = props;
return data.custom ? (
<div ref={innerRef} {...innerProps}>
I'm a custom link
</div>
) : (
<components.Option {...props} />
);
};
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
{ custom: true }
];
function App() {
return <Select components={{ Option: CustomOption }} options={options} />;
}
The important thing to notice is to pass the entire props property to the components.Option to have the default behaviour.
Here a live example.