Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better color hex validation #67

Open
dreamyguy opened this issue Feb 16, 2020 · 0 comments
Open

Better color hex validation #67

dreamyguy opened this issue Feb 16, 2020 · 0 comments

Comments

@dreamyguy
Copy link

I think there could be a better color validation, since 4-digit hex values are perfectly fine and offer unique colors. Ie. all the hexes below are valid:

#aadd
#abcd
#affa
#baba
#dada
#cace

I've been working on a color validation package that could help:

https://www.npmjs.com/package/validate-color

This is how it could be applied to hexColorPropType.js:

import { validateHTMLColorHex } from 'validate-color';

// Make sure color props are strings that start with "#" since other ways to write colors are not supported.
const hexColorPropType = (props, propName, componentName) => {
  const prop = props[propName];
  if (
    !validateHTMLColorHex(prop)
  ) {
    return new Error(
      `Invalid prop '${propName}' supplied to '${componentName}'. '${propName}' has to be a hex-color string. Valid examples: '#abc', '#dada', '#123456'`
    );
  }
  return null;
};

export default hexColorPropType;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant