JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 32568
  • Score
    100M100P100Q145279F
  • License MIT

Validate HTML colors by 'name', 'hex', 'rgb', 'rgba', 'hsl' or 'hsla' values

Package Exports

  • validate-color

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (validate-color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Validate Color

✅🌈🙌 Validate HTML colors by name, hex, rgb, rgba, hsl or hsla values

Node Version NPM Version MIT Licence

HTML colors are remarkably easy to get wrong, because they allow for so many different values.

As I was writing Console Log Plus, I thought it would be great to allow users to pass any HTML color they wanted as one of the parameter to the function. But since HTML colors have so many variations and therefore are complex strings, it didn't take me long to realize that I'd have to make quite a few checks to validate the value passed by the user. That need brought me here.

Validate Color let's one validate the color string against all current possible HTML color values. Some examples:

  • hex - #bada55
  • name - LightGoldenrodYellow
  • rgb - rgb(0, 0, 0)
  • rgba - rgba(0, 0, 0, .45)
  • hsl - hsl(100%, 100%, 100%)
  • hsla - hsla(100%, 100%, 100%, 1)

Usage

As with any node module, first you'll have to import it with require:

var validateColor = require('validate-color');

...or through import:

import validateColor from 'validate-color';

Once you've done the import, you'll be able to do checks like (example in React):

import React from 'react';
import validateColor from 'validate-color';

const ColorBox = props => {
  const {
    color = '',
    text = ''
  } = props;
  const theColor = color && validateColor(color) ? color : 'transparent';
  return (
    <div className="color-box" style={{backgroundColor: theColor}}>
      <p>{text}</p>
    </div>
  )
};

export default ColorBox;

Development

Getting started

Clone this repo locally. You'll need to have NodeJS installed. Install all dependencies by running:

npm i

Building for production

When you're done with your changes, run:

 npm run build

This command compiles the production-optimised javascript to dist/index.js, a file compiled out of src/index.js.

Testing

This project wouldn't be complete without proper testing.

Jest is my Unit Testing framework of choice. It's well documented and shares good practices & syntax with its most known predecessors (Mocha, Jasmine, etc). Babel was introduced as a dependency to the project because of Jest, but it was worth it since now we can use ES6 syntax on our tests as well.

Run all tests, once:

npm run test

Initialise the tests in watch mode:

npm run test:watch

All tests reside under the test/ folder. There's only one test file at the moment: index.test.js.

Good to know

License

MIT

Credits

About

Validate Color was put together by Wallace Sidhrée. 👨‍💻🇳🇴