Add format value option

README.md

@@ -234,6 +234,7 @@ This table shows all the options available in react-tailwindcss-select.
 | `isSearchable`                                | `Boolean`  | `false`            | Indicates if you can search the elements of the select field.                          |
 | [`formatGroupLabel`](#formatGroupLabel)       | `Function` | `null`             | Allows you to use a custom rendering template for each subgroup title                  |
 | [`formatOptionLabel`](#formatOptionLabel)     | `Function` | `null`             | Allows you to use a custom rendering template for each option in the list              |
+| `formatValue`                                 | `Function` | `null`             | Allows your to format the resulted value                                               |
 | `loading`                                     | `Boolean`  | `false`            | Indicates if you want a loader to appear in the field.                                 |
 | `menuIsOpen`                                  | `Boolean`  | `false`            | Indicates if you want the options menu to be displayed by default.                     |
 | `noOptionsMessage`                            | `String`   | `No results found` | Default message when there is no option in the select field.                           |

package.json

@@ -1,11 +1,11 @@
 {
-    "name": "react-tailwindcss-select",
-    "version": "1.8.5",
+    "name": "react-tailwindcss-select-plus",
+    "version": "1.8.9",
     "description": "A select input made with React js and Tailwind CSS",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
     "types": "dist/index.d.ts",
-    "author": "onesine",
+    "author": "mennovanhout",
     "license": "MIT",
     "scripts": {
         "watch": "rollup -c -w",
@@ -21,7 +21,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/onesine/react-tailwindcss-select"
+        "url": "https://github.com/mennovanhout/react-tailwindcss-select"
     },
     "keywords": [
         "combobox",

src/components/Item.tsx

@@ -65,8 +65,8 @@ const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
                         <li
                             tabIndex={0}
                             onKeyDown={(e: React.KeyboardEvent<HTMLLIElement>) => {
-                                if (e.key === ' ' || e.key === 'Enter') {
-                                    handleValueChange(item)
+                                if (e.key === " " || e.key === "Enter") {
+                                    handleValueChange(item);
                                 }
                             }}
                             aria-selected={isSelected}

src/components/Select.tsx

@@ -27,6 +27,7 @@ const Select: React.FC<SelectProps> = ({
     primaryColor = DEFAULT_THEME,
     formatGroupLabel = null,
     formatOptionLabel = null,
+    formatValue = null,
     classNames
 }) => {
     const [open, setOpen] = useState<boolean>(menuIsOpen);
@@ -185,9 +186,15 @@ const Select: React.FC<SelectProps> = ({
                 >
                     <div className="grow pl-2.5 py-2 pr-2 flex flex-wrap gap-1">
                         {!isMultiple ? (
-                            <p className="truncate cursor-default select-none">
-                                {value && !Array.isArray(value) ? value.label : placeholder}
-                            </p>
+                            formatValue && typeof formatValue === "function" ? (
+                                formatValue(
+                                    value && !Array.isArray(value) ? value!.label : placeholder
+                                )
+                            ) : (
+                                <p className="truncate cursor-default select-none">
+                                    {value && !Array.isArray(value) ? value.label : placeholder}
+                                </p>
+                            )
                         ) : (
                             <>
                                 {value === null && placeholder}

src/components/type.ts

@@ -51,5 +51,6 @@ export interface SelectProps {
     primaryColor: string;
     formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null;
     formatOptionLabel?: ((data: Option) => JSX.Element) | null;
+    formatValue?: ((label: string) => JSX.Element) | null;
     classNames?: ClassNames;
 }