FRAMEWORK » NEXTJS » PLUGINS
React Select
Change height
Reducing the height requires some workaround.
ts
import Select from 'react-select';
import type { Theme } from 'react-select';
function PulldownSearch({ instanceId, options, setFilterValue }) {
const theme = (theme: Theme) => ({
...theme,
spacing: { // Change pulldown height to 26px
...theme.spacing,
baseUnit: 2,
controlHeight: 26,
menuGutter: 4,
},
});
return (
<Select
instanceId={instanceId}
isSearchable={false}
isClearable={false}
defaultValue={options[0]}
options={options}
theme={theme}
styles={{
option: (base) => ({ // Fix options being too small
...base,
padding: 8,
}),
}}
onChange={(option) => {
setFilterValue(option?.value);
}}
/>
);
}