Issue with Returning String from Pure Function in React with Type Checking

July 12, 2023

i have a problem using a pure function with a string that gets returned from it instead of JSX.

To unsure that the prop is provided as string, i added a type check, but that breaks it.

Here the code of the returning function:

import React from "react";

type GetContrastTextColorProps = {
    color: string;
};

const GetContrastTextColor: React.FC<GetContrastTextColorProps> = ({color}) => {
    const r = parseInt(color.substr(1, 2), 16);
    const g = parseInt(color.substr(3, 2), 16);
    const b = parseInt(color.substr(5, 2), 16);
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance > 0.50 ? 'black' : 'white';
    }

export default GetContrastTextColor;

And here the recieving component in a different file:

import { Chip } from "@mui/material";
import React from "react";
import GetContrastColor from "../helpers/GetContrastColor";

type TypeProps = {
  name: string;
  color: string;
};

const Type: React.FC<TypeProps> = ({ name, color }) => {

  return (
    <Chip
      style={{
        backgroundColor: color,
        color: GetContrastColor(color),
      }}
      size="small"
      label={name}
    />
  );
};

export default Type;

Compiled with problems:X

ERROR in src/components/Type.tsx:26:9

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { avatar?: ReactElement<any, string | JSXElementConstructor<any>> | undefined; children?: null | undefined; ... 12 more ...; variant?: "filled" | ... 1 more ... | undefined; } & CommonProps & Omit<...>): Element | null', gave the following error.
    Type 'ReactElement<any, any> | null' is not assignable to type 'Color | undefined'.
      Type 'null' is not assignable to type 'Color | undefined'.
  Overload 2 of 2, '(props: DefaultComponentProps<ChipTypeMap<{}, "div">>): Element | null', gave the following error.
    Type 'ReactElement<any, any> | null' is not assignable to type 'Color | undefined'.
    24 |       style={{
    25 |         backgroundColor: color,
  > 26 |         color: GetContrastColor(color),
       |         ^^^^^
    27 |       }}
    28 |       size="small"
    29 |       label={name}


ERROR in src/components/Type.tsx:26:33

TS2345: Argument of type 'string' is not assignable to parameter of type 'GetContrastTextColorProps'.
    24 |       style={{
    25 |         backgroundColor: color,
  > 26 |         color: GetContrastColor(color),
       |                                 ^^^^^
    27 |       }}
    28 |       size="small"
    29 |       label={name}


ERROR in src/helpers/GetContrastColor.tsx:7:7

TS2322: Type '({ color }: GetContrastTextColorProps) => "black" | "white"' is not assignable to type 'FC<GetContrastTextColorProps>'.
  Type '"black" | "white"' is not assignable to type 'ReactElement<any, any> | null'.
    Type 'string' is not assignable to type 'ReactElement<any, any>'.
     5 | };
     6 |
  >  7 | const GetContrastTextColor: React.FC<GetContrastTextColorProps> = ({color}) => {
       |       ^^^^^^^^^^^^^^^^^^^^
     8 |     const r = parseInt(color.substr(1, 2), 16);
     9 |     const g = parseInt(color.substr(3, 2), 16);
    10 |     const b = parseInt(color.substr(5, 2), 16);

I have asked chatgpt and googled for Solutions, but it seems react doesnt support this.

When i remove the "type GetContrastTextColorProps{}" and the ": React.FC" it returns the string to the component, but the type checking gets lost.

Do you guys have a clue, what i can do to get it working?

Thank you for helping.

>Solution :

You don’t need react at all for this, use a plain function:

function getContrastTextColor (color: string): string {
    const r = parseInt(color.substr(1, 2), 16);
    const g = parseInt(color.substr(3, 2), 16);
    const b = parseInt(color.substr(5, 2), 16);
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance > 0.50 ? 'black' : 'white';
}