How to customize the main component like background color, border, arrow icon etc?

[pmrzygweb]

[onesine]

Thanks for the remark. It is all the more relevant since it was mentioned in another issue.

By the way I was thinking about a way to allow people to customize all the components. But I don't know exactly what form it should take in the manipulation so that it's simple for most people. And especially that it's intuitive.

That's why I introduced several themes.

Can you tell me how you would have used this customization on the select field. An example would be interesting @pmrzygweb .

[jaumarro]

Hi!
Verrrrry nice component you made 💯!
The only thing I miss is style customization 🎨 (as @pmrzygweb I guess 😅).

IMO I would add a prop(s) for the tailwind classes for each element of the component with some theme defaults.
Something like <element-name>Classes:

interface SelectProps {
...
listClasses?: string
listElementClasses?: string
searchBoxClasses?: string
spinnerClasses?: string
...
}
<Select listClasses={'bg-green'} options={options}/>

Or in a object:

type CustomizationOptions {
  list?: string
  listElement?: string
  searchBoxClasses?: string
  spinnerClasses?: string
}

<Select customizationOptions={ list: 'bg-green' } options={options}/>

I also would very much appreciate to be allowed to use my own tailwind colors in the primaryColor prop.
<Select primaryColor='accent'/>

Thanks 🙇 🙏!

[onesine]

Hi !
Sorry for the delay @jaumarro .

Thank you very much for your interest in this package and for the proposal that is very interesting. I would appreciate if we could gather everything in one object. We are used to className, we could use it for example.

We will have for example

type className {
    ...
    list?: string,
    listElement?: string,
    searchBox?: string,
    ....
}

[onesine]

The package is new and can always be improved. So feel free to contribute if you have ideas and time to implement them.

[guifeliper]

I also would very much appreciate to be allowed to use my own tailwind colors in the primaryColor prop.
<Select primaryColor='accent'/>

@onesine Is it working? It is not on my end.
If not I can try to implement it

[onesine]

Hi @guifeliper 👋

I'm sorry for the delay. I hadn't noticed your message. Ok we will wait for your implementation.