Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save sadeghbarati/9b5bf233b6b818b8d6d563a5da020363 to your computer and use it in GitHub Desktop.
Save sadeghbarati/9b5bf233b6b818b8d6d563a5da020363 to your computer and use it in GitHub Desktop.
import ReactSelect from 'react-select'
export const REACT_SELECT_CUSTOM_STYLES = {
control: (provided) => ({
...provided,
fontSize: '0.875rem',
lineHeight: '1.25rem'
}),
valueContainer: (provided) => ({
...provided,
minHeight: '38px'
}),
option: (provided) => ({
...provided,
fontSize: '0.875rem',
lineHeight: '1.25rem'
}),
input: (provided) => ({
...provided,
fontSize: '0.875rem',
lineHeight: '1.25rem'
}),
placeholder: (provided) => ({
...provided,
fontSize: '0.875rem',
lineHeight: '1.25rem'
}),
noOptionsMessage: (provided) => ({
...provided,
fontSize: '0.875rem',
lineHeight: '1.25rem'
})
}
const Select = ({ ...props }) => {
return (
<ReactSelect
styles={REACT_SELECT_CUSTOM_STYLES}
inputClassName='focus:border-0 focus:ring-0 font-primary font-light text-sm md:text-base'
theme={(theme) => ({
...theme,
borderRadius: 'calc(var(--radius) - 2px)',
borderColor: 'red',
colors: {
...theme.colors,
primary: 'hsl(var(--primary))',
primary25: '#f4f4f5',
primary50: '#e5e7eb',
primary75: '#d1d5db',
neutral30: 'hsl(var(--input))',
neutral20: 'hsl(var(--input))'
}
})}
{...props}
/>
)
}
export default Select
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment