More metadata is needed for conditional styling

[AruhaMaeda]

Hi, this is a great library, and thank you for your development and sharing!

I have a feature request. I want to change the tag Item styling based on its value. But I think more metadata is needed to achieve this. (currently "disabled" only)

In my use case, there are "todo", "in progress", "done" labels. and want to change its background and text color in order for users to see what is currently selected.

In this case, something like "value" is good

            classNames={{
              tagItem: ({ value, isDisabled }) => {
                if (value === 'todo') {
                  return 'flex text-sm text-yellow-500 border border-slate-300 rounded shadow-sm mx-0.5'
                }
                if (value === 'in progress') {
                  return 'flex text-sm text-red-500 border border-slate-300 rounded shadow-sm mx-0.5'
                }
                if (value === 'done') {
                  return 'flex text-sm text-green-500 border border-slate-300 rounded shadow-sm mx-0.5'
                }
              },

[onesine]

Hi @AruhaMaeda 👋

Thanks for using our library and thanks for this feature request.

I think your request is really relevant and should be implemented very soon. It will be available in the next release, most likely within the day.

[onesine]

Hi @AruhaMaeda 👋!

Sorry for the delay. I added some features to the project to make the development phase easier. The functionality is now available. But you have to upgrade to version 1.8.0.

Now use this code.

classNames={{
  tagItem: ({ item, isDisabled }) => {
    if (item.value === 'todo') {
      return 'flex text-sm text-yellow-500 border border-slate-300 rounded shadow-sm mx-0.5'
    }
    if (item.value === 'in progress') {
      return 'flex text-sm text-red-500 border border-slate-300 rounded shadow-sm mx-0.5'
    }
    if (item.value === 'done') {
      return 'flex text-sm text-green-500 border border-slate-300 rounded shadow-sm mx-0.5'
    }
},

Item contains all information of the tag.

https://github.com/onesine/react-tailwindcss-select#all-keys