rgbToHex Function Should Handle Invalid Input Gracefully

[akaashvaa]

checkmark

• I have tested the latest version
• I have searched the issues of this repository and believe that this is not a duplicate.

Steps to reproduce

Link to live example: replit

checkout the console of replit.

Manual setup:

       const styles = document.querySelector(".rgbToHex").style
       console.log( rgbToHex(styles.backgroundColor))

Current behavior

It's repetitive to write code like this:

const styles = document.querySelector(".rgbToHex").style

// handling current behaviour 
console.log(styles.backgroundColor ? rgbToHex(styles.backgroundColor) : "developer choice  response")

Expected behavior

how code like this:

const styles = document.querySelector(".rgbToHex").style

// how code should look like , this will increase the developer experience
console.log( rgbToHex(styles.backgroundColor)  || "developer choice  response")

Possible Solution

I am trying to improve the rgbToHex function in Material-UI to handle invalid input (e.g., null, undefined, or empty strings) more gracefully. Currently, it throws an error for such inputs.

 
export function rgbToHex(color) {
  // solution : return null if color is falsy
  if (!color) {
    return null;
  }
  // Idempotent
  if (color.startsWith('#')) {
    return color;
  }

  const { values } = decomposeColor(color);
  return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
}

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[siriwatknp]

I recommend you to write a wrapper to handle null undefined the way you want or may be use other library that handles it.

I don't think we will add support for them very soon.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@akaashvaa How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.