some idea of label styles (highlighting searchinput value) with preview sceenshot

[cha2hyun]

Hi there 👋
Thanks for woderful components.
I have some idea for label styles. (highlight searchinput value)
If you like it, i will make a PR

Preview

before

highlight

Some Code

Item.tsx

import React, { useCallback, useMemo } from 'react';

import DisabledItem from './DisabledItem';
import { useSelectContext } from './SelectProvider';
import { Option } from './type';
import { COLORS, DEFAULT_THEME, THEME_DATA } from '../constants';

interface ItemProps {
  item: Option;
  primaryColor: string;
  searchInput?: string;
}

const Item: React.FC<ItemProps> = ({ item, primaryColor, searchInput }) => {
  const { classNames, value, handleValueChange, formatOptionLabel } =
    useSelectContext();

  const isSelected = useMemo(() => {
    return (
      value !== null && !Array.isArray(value) && value.value === item.value
    );
  }, [item.value, value]);

  const textHoverColor = useMemo(() => {
    if (COLORS.includes(primaryColor)) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      return THEME_DATA.textHover[primaryColor];
    }
    return THEME_DATA.textHover[DEFAULT_THEME];
  }, [primaryColor]);

  const bgColor = useMemo(() => {
    if (COLORS.includes(primaryColor)) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      return THEME_DATA.bg[primaryColor];
    }
    return THEME_DATA.bg[DEFAULT_THEME];
  }, [primaryColor]);

  const bgHoverColor = useMemo(() => {
    if (COLORS.includes(primaryColor)) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      return THEME_DATA.bgHover[primaryColor];
    }
    return THEME_DATA.bgHover[DEFAULT_THEME];
  }, [primaryColor]);

  const getItemClass = useCallback(() => {
    const baseClass =
      'block transition duration-200 px-2 py-2 pl-5 cursor-pointer select-none truncate rounded';
    const selectedClass = isSelected
      ? `text-white ${bgColor}`
      : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;

    return classNames && classNames.listItem
      ? classNames.listItem({ isSelected })
      : `${baseClass} ${selectedClass}`;
  }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);

// HERE👇👇👇
  const getItemLabelWithColor = () => {
    if (searchInput) {
      const upperSearchInput = searchInput?.toUpperCase();
      const start = item.label.indexOf(upperSearchInput);
      const end = start + searchInput.length;
      const labelArray = item.label.split('');
      return labelArray.map((label, idx) => {
        if (idx >= start && idx < end) {
            <span className={`font-bold text-${primaryColor}-500`}>
              {label}
            </span>
        } else {
          return <span>{label}</span>;
        }
      });
    } else {
      return item.label;
    }
  };
// 

  return (
    <>
      {formatOptionLabel ? (
        <div onClick={() => handleValueChange(item)}>
          {formatOptionLabel({ ...item, isSelected })}
        </div>
      ) : (
        <>
          {item.disabled ? (
            <DisabledItem>{item.label}</DisabledItem>
          ) : (
            <li
              aria-selected={isSelected}
              role='option'
              onClick={() => handleValueChange(item)}
              className={getItemClass()}
            >
              {/* {item.label} */}👇👇👇
              {getItemLabelWithColor()}
            </li>
          )}
        </>
      )}
    </>
  );
};

export default Item;

[onesine]

Hi @cha2hyun 👋

Thank you for this idea. It would be really great to have this option. But, it would have to be an option that the user can enable or not via a props. Also, it would be nice if he could use the utility classes to change the style of the elements that are highlighted. By default, the style of the highlighted elements will be consistent with the theme. If the user uses the blue theme, the color of the highlighted items in the filter will be blue.

This would be a really interesting PR. We look forward to it.

[cha2hyun]

Hi @cha2hyun 👋

Thank you for this idea. It would be really great to have this option. But, it would have to be an option that the user can enable or not via a props. Also, it would be nice if he could use the utility classes to change the style of the elements that are highlighted. By default, the style of the highlighted elements will be consistent with the theme. If the user uses the blue theme, the color of the highlighted items in the filter will be blue.

This would be a really interesting PR. We look forward to it.

Thanks for amazing library i really like it.

Looking forward to customizing feature with utility classes 👍

Also you can test issue #18 #19 on here

I will requests a PR when im ready

please feel free to cantact me if you need any ideas or contributes 😀

Best regards

[onesine]

I am glad to hear that you liked it and that you used it on your site. By the way, your site looks great and I've already tested the package on your site. I'm curious to know what technology stack you used to make it.

Any contribution is welcome and I would be glad to see you contribute to this package.

Best regards

[cha2hyun]

I am glad to hear that you liked it and that you used it on your site. By the way, your site looks great and I've already tested the package on your site. I'm curious to know what technology stack you used to make it.

Any contribution is welcome and I would be glad to see you contribute to this package.

Best regards

Hi onesine 👋

Front : Next.js + Typescript + Tailwind
Package : react-tailwind-select, react-query, react-table, aos, ..

I use https://github.com/theodorusclarence/ts-nextjs-tailwind-starter 👈 template.

[onesine]

Thank you for this information. And for the Backend, what do you use?

[cha2hyun]

I use Django or Fast API 😀

[onesine]

Okay, it's a great technology. And especially thank you for this feature.