├── .babelrc
├── .env
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── bin
├── postBuildNpm.sh
└── preBuildNpm.sh
├── docs
└── validate-color-logo-github-full-width.png
├── package-lock.json
├── package.json
├── public
├── apple-touch-icon-114x114.png
├── apple-touch-icon-120x120.png
├── apple-touch-icon-144x144.png
├── apple-touch-icon-152x152.png
├── apple-touch-icon-57x57.png
├── apple-touch-icon-72x72.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── index.html
├── manifest.json
├── mstile-144x144.png
├── validate-color-og-alt.png
└── validate-color-og.png
├── src
├── app
│ ├── App.js
│ ├── App.scss
│ ├── App.test.js
│ └── components
│ │ ├── Footer.js
│ │ ├── Input.js
│ │ └── Input.scss
├── index.js
├── index.scss
├── serviceWorker.js
├── styles
│ ├── _layout.scss
│ └── _variables.scss
├── utils
│ ├── copyToClipboardUtil.js
│ ├── isEmptyUtil.js
│ └── isEmptyUtil.test.js
└── validate-color
│ ├── index.d.ts
│ ├── index.js
│ └── index.test.js
└── webpack.config.npm.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | PORT=9900
2 | SKIP_PREFLIGHT_CHECK=true
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # assets necessary for the application
4 | # but too large to be tracked, like .psd files
5 | /_assets
6 |
7 | # dependencies
8 | /node_modules
9 | /.pnp
10 | .pnp.js
11 |
12 | # testing
13 | /coverage
14 |
15 | # production
16 | /build
17 | /lib
18 |
19 | # development mode
20 | .env.*
21 | README_*
22 |
23 | # misc
24 | .DS_Store
25 |
26 | # logs
27 | npm-debug.log*
28 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # assets necessary for the application
4 | # but too large to be tracked, like .psd files
5 | /_assets
6 |
7 | # dependencies
8 | /node_modules
9 | /.pnp
10 | .pnp.js
11 |
12 | # testing
13 | /coverage
14 |
15 | # production
16 | /build
17 | /bin
18 | /public
19 |
20 | # documentation
21 | /docs
22 |
23 | # development mode
24 | .babelrc
25 | .env
26 | .env.*
27 | .travis*
28 | /src
29 | TODO.md
30 | README_*
31 | webpack.config.*
32 | package-lock.json
33 |
34 | # misc
35 | .DS_Store
36 |
37 | # logs
38 | npm-debug.log*
39 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | cache:
3 | directories: node_modules
4 | node_js: 12
5 | script:
6 | - npm install react react-dom
7 | - npm run testTravis
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 Wallace Sidhrée
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Validate Color
4 |
5 | > ✅🌈🙌 Validate HTML colors by `name`, `special name`, `hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hwb`, `lab` or `lch` values
6 |
7 | [](https://travis-ci.org/dreamyguy/validate-color) [](https://github.com/nodejs/node/releases/tag/v12.4.0)
8 | [](https://github.com/npm/cli/releases/tag/v6.9.0)
9 | [](https://github.com/dreamyguy/validate-color/blob/master/LICENSE)
10 |
11 | **_HTML colors are remarkably easy to get wrong_**, because they allow for so many different values.
12 |
13 | As I was writing [Console Log Plus](https://github.com/dreamyguy/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.
14 |
15 | **Validate Color** let's one validate the color string against all current possible _HTML color_ values. Some examples:
16 |
17 | - `hex` - `#bada55`
18 | - `name` - `LightGoldenrodYellow`
19 | - `special name` - `currentColor`
20 | - `rgb` - `rgb(0 0 0)`
21 | - `rgba` - `rgba(0, 0, 0, .45)`
22 | - `hsl` - `hsl(4.71239rad, 60%, 70%)`
23 | - `hsla` - `hsla(180deg 100% 50% / .8)`
24 | - `hwb` - `hwb(180deg 0% 0% / 100%)`
25 | - `lab` - `lab(2000.1337% -8.6911 -159.131231 / .987189732)`
26 | - `lch` - `lch(54.292% 106.839 40.853)`
27 |
28 | Both `rgba` and `hsla` are now officially merged into their `rgb` and `hsl` counterparts, so the `a` can be omitted. The `a` is considered legacy syntax, so it will still work.
29 |
30 | # Demo ✅ 🌈 🙌
31 |
32 | To demonstrate the power of _validate-color_, I decided it would be best to create a living github page, that would serve both as a way of showcase _validate-color_, and facilitate its use:
33 |
34 | [https://dreamyguy.github.io/validate-color/][7]
35 |
36 | On this page you can:
37 |
38 | - **Validate HTML colors as you type**
39 |
40 | _On my TODO list:_
41 |
42 | - _See opaque colors against black and white backgrounds._
43 | - _See colors with transparency in different contexts._
44 |
45 | # Usage
46 |
47 | **validate-color** is also [available as a package on `npm`][6] and can be installed as a depedency with:
48 |
49 | npm i validate-color --save
50 |
51 | As with any node module, first you'll have to import it with `require`:
52 |
53 | ```javascript
54 | var validateColor = require("validate-color").default;
55 | ```
56 |
57 | ...or through `import`:
58 |
59 | ```javascript
60 | import validateColor from "validate-color";
61 | ```
62 |
63 | Once you've done the import, you'll be able to do checks like (example in **React**):
64 |
65 | ```javascript
66 | import React from "react";
67 | import validateColor from "validate-color";
68 |
69 | const ColorBox = (props) => {
70 | const { color = "", text = "" } = props;
71 | const theColor = color && validateColor(color) ? color : "transparent";
72 | return (
73 |
74 |
{text}
75 |
76 | );
77 | };
78 |
79 | export default ColorBox;
80 | ```
81 |
82 | > 👉 The source for a full-fledged color validation component can be [viewed here](https://github.com/dreamyguy/validate-color/blob/master/src/app/App.js). That component can be [seen in action here][7].
83 |
84 | # Extend
85 |
86 | One can "extend" the library by using only parts of it.
87 |
88 | **1. Validate only HTML colors (`hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hwb`, `lab`, `lch`), without `name`**
89 |
90 | ```javascript
91 | import { validateHTMLColor } from "validate-color";
92 | ```
93 |
94 | **2. Validate only `HEX` colors**
95 |
96 | ```javascript
97 | import { validateHTMLColorHex } from "validate-color";
98 | ```
99 |
100 | **3. Validate only `HSL` colors**
101 |
102 | ```javascript
103 | import { validateHTMLColorHsl } from "validate-color";
104 | ```
105 |
106 | **4. Validate only `NAME` colors**
107 |
108 | ```javascript
109 | import { validateHTMLColorName } from "validate-color";
110 | ```
111 |
112 | **5. Validate only `RGB` colors**
113 |
114 | ```javascript
115 | import { validateHTMLColorRgb } from "validate-color";
116 | ```
117 |
118 | **6. Validate only `SPECIAL NAME` colors**
119 |
120 | ```javascript
121 | import { validateHTMLColorSpecialName } from "validate-color";
122 | ```
123 |
124 | **7. Validate only `HWB` colors**
125 |
126 | ```javascript
127 | import { validateHTMLColorHwb } from "validate-color";
128 | ```
129 |
130 | **8. Validate only `LAB` colors**
131 |
132 | ```javascript
133 | import { validateHTMLColorLab } from "validate-color";
134 | ```
135 |
136 | **9. Validate only `LCH` colors**
137 |
138 | ```javascript
139 | import { validateHTMLColorLch } from "validate-color";
140 | ```
141 |
142 | > 👉 I was proactive and added validation to these relatively new HTML/CSS colors (**HWB** & **LAB** & **LCH**), but since [they're still drafts at the time of this writing][9], they might still be not fully supported at the time of this reading.
143 |
144 | # Preventing ReDoS (`regex` denial-of-service) attacks
145 |
146 | A ReDoS vulnerability [was reported as an issue](https://github.com/dreamyguy/validate-color/issues/28) on Oct 14, 2022, but that went under my radar. It was just today (Jan 29, 2023) I came across the issue, and luckily I had time to look into it.
147 |
148 | This vulnerability was officially reported as **`CVE-2021-40892`**, and is listed a few places: [1](https://nvd.nist.gov/vuln/detail/CVE-2021-40892), [2](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-40892), [3](https://security.snyk.io/vuln/SNYK-JS-VALIDATECOLOR-2935878), [4](https://cve.report/CVE-2021-40892), [5](https://feedly.com/cve/CVE-2021-40892).
149 |
150 | A similar problem was reported for the [`color-string` package](https://security.snyk.io/vuln/SNYK-JS-COLORSTRING-1082939), versions < 1.5.5.
151 |
152 | A good article by Godson Obielum: [How to protect against regex denial-of-service (ReDoS) attacks](https://blog.logrocket.com/protect-against-regex-denial-of-service-redos-attacks/).
153 |
154 | The issue is caused by the "greedy" character in `regex`, the infamous `+`. I've made amendments that limit the number of both spaces and digits by `5`, instead of having no limits.
155 |
156 | I've also made patterns stricter and removed redundant optionals, simplifying whenever possible.
157 |
158 | > 👉 All current `regex` have been tested with https://regex.rip/ and `npx redos-detector check "" --maxSteps 10000)` (see [redos-detector](https://www.npmjs.com/package/redos-detector) for more options).
159 |
160 | **That will, from this point onwards, invalidate otherwise valid colors that cross that threshold.**
161 |
162 | Since this is an important update, I'm releasing it as a patch ([`v2.2.3`](https://github.com/dreamyguy/validate-color/releases/tag/v2.2.3))
163 |
164 | # Development
165 |
166 | ## Getting started
167 |
168 | Clone this repo locally. You'll need to have [NodeJS][1] installed. Install all dependencies by running:
169 |
170 | npm i
171 |
172 | ## Run it locally
173 |
174 | To start the app locally, run:
175 |
176 | npm run start
177 |
178 | This command fires up the application on port `9900`, making it visible on http://localhost:9900. Because this app is based on [create-react-app][2], the port number should be configured on the [.env](https://github.com/dreamyguy/validate-color/blob/master/.env#L1) file.
179 |
180 | ## Building the frontend for Production
181 |
182 | When you're ready to build for production, run:
183 |
184 | npm run build
185 |
186 | This command compiles all production-optimised resources to a folder called **build**. It's meant to be run remotely, at the environment host, at build time.
187 |
188 | ## Building for NPM
189 |
190 | When you're done with your changes, run:
191 |
192 | npm run build-npm
193 |
194 | This command compiles the distribution-optimised `javascript` to `lib/index.js`, a file compiled out of [src/validate-color/index.js][3].
195 |
196 | > 👉 Note that the `lib/` folder and its contents are only available at the [NPM distribution][6].
197 |
198 | # Testing
199 |
200 | This project wouldn't be complete without proper testing.
201 |
202 | [Jest][4] 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][5] 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.
203 |
204 | Run all tests, in watch mode:
205 |
206 | npm run test
207 |
208 | Tests are also run through [Travis][8] on every push to `master`. The build status is shown [at the top of this README](https://github.com/dreamyguy/validate-color#validate-color).
209 |
210 | > 👉 All tests are named according to the file they're testing: `index.js` -> _`index.test.js`_, and reside under the same directory. Since `Jest` comes as courtesy of [CRA][2], all tests should be placed under the [src/](https://github.com/dreamyguy/validate-color/blob/master/src/) folder.
211 |
212 | # Deploying
213 |
214 | This repo is a hybrid one. It:
215 |
216 | - Builds the NPM distribution
217 | - Builds the GitHub Page that serves as a demo/showcase
218 |
219 | There are 3 commands one can run to deploy to these two places.
220 |
221 | **Deploy to GitHub Pages**
222 |
223 | npm run deploy
224 |
225 | **Deploy to NPM**
226 |
227 | npm run deploy-npm
228 |
229 | **Deploy to both places at once**
230 |
231 | npm run release
232 |
233 | > ⚠️ Make sure to bump version before releasing!
234 |
235 | ## Good to know
236 |
237 | ### License
238 |
239 | [MIT](LICENSE)
240 |
241 | ### Credits & Resources
242 |
243 | - [Source from which the color name list was extracted from](https://htmlcolorcodes.com/color-names/)
244 | - [The Ultimate Guide to CSS Colors 2020 Edition](https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1#hsl)
245 | - [MDN: CSS Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
246 | - [MDN: Color Picker tool](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool)
247 | - [CSS Color Module Level 4 Editor's Draft][9]
248 | - [Lea Verou: LCH colors in CSS: what, why, and how?][10]
249 | - [LCH Colour Picker][11]
250 |
251 | ### About
252 |
253 | **Validate Color** was put together by [Wallace Sidhrée][1]. 👨💻🇳🇴
254 |
255 | [1]: http://sidhree.com/
256 | [2]: https://facebook.github.io/create-react-app/
257 | [3]: https://github.com/dreamyguy/validate-color/blob/master/src/validate-color/index.js
258 | [4]: https://jestjs.io/
259 | [5]: https://babeljs.io/
260 | [6]: https://www.npmjs.com/package/validate-color
261 | [7]: https://dreamyguy.github.io/validate-color/
262 | [8]: https://travis-ci.com/dreamyguy/validate-color
263 | [9]: https://drafts.csswg.org/css-color/
264 | [10]: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
265 | [11]: https://css.land/lch/
266 |
--------------------------------------------------------------------------------
/bin/postBuildNpm.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Do something after 'build-npm' is done
4 |
5 | # Copy the intended component file the project's index / entrypoint
6 | echo '🎈 build-npm was completed'
7 | echo '🎯 Copy type definitions to lib/'
8 | cp src/validate-color/index.d.ts lib/index.d.ts
9 |
--------------------------------------------------------------------------------
/bin/preBuildNpm.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Do something before 'build-npm' is run
4 | echo '🏎 Runnin build-npm, hang tight!'
5 |
--------------------------------------------------------------------------------
/docs/validate-color-logo-github-full-width.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/docs/validate-color-logo-github-full-width.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "validate-color",
3 | "version": "2.2.4",
4 | "private": false,
5 | "description": "Validate HTML colors by 'name', 'special name', 'hex', 'rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab' or 'lch' values",
6 | "keywords": [
7 | "validation",
8 | "color",
9 | "colors",
10 | "colour",
11 | "colours",
12 | "validate color",
13 | "validate colour",
14 | "color validation",
15 | "colour validation",
16 | "HTML color validation",
17 | "HTML colour validation",
18 | "validate HTML color",
19 | "validate HTML colour",
20 | "hex",
21 | "rgb",
22 | "rgba",
23 | "hsl",
24 | "hsla",
25 | "hwb",
26 | "lab",
27 | "lch",
28 | "css"
29 | ],
30 | "homepage": "https://dreamyguy.github.io/validate-color/",
31 | "repository": {
32 | "type": "git",
33 | "url": "https://github.com/dreamyguy/validate-color"
34 | },
35 | "main": "lib/index.js",
36 | "types": "lib/index.d.ts",
37 | "author": {
38 | "name": "Wallace Sidhrée",
39 | "email": "i@dreamyguy.com",
40 | "url": "http://sidhree.com/"
41 | },
42 | "copyright": "Copyright (c) Wallace Sidhrée - All rights reserved.",
43 | "license": "MIT",
44 | "devDependencies": {
45 | "@babel/core": "^7.15.8",
46 | "@babel/preset-env": "^7.15.8",
47 | "@babel/preset-react": "^7.14.5",
48 | "babel-loader": "^8.2.3",
49 | "fork-me-on-github": "^1.0.6",
50 | "gh-pages": "^3.2.3",
51 | "node-sass": "^6.0.1",
52 | "react": "^17.0.2",
53 | "react-dom": "^17.0.2",
54 | "react-emojis": "^1.0.6",
55 | "react-scripts": "^4.0.3",
56 | "webpack": "4.44.2",
57 | "webpack-cli": "^4.2.0"
58 | },
59 | "scripts": {
60 | "start": "react-scripts start",
61 | "prebuild": "echo 🚀 Runnin 'build', hang tight!",
62 | "build": "react-scripts build",
63 | "postbuild": "echo 🎉 'build' was completed",
64 | "prebuild-npm": "./bin/preBuildNpm.sh",
65 | "build-npm": "NODE_ENV=npm webpack --config webpack.config.npm.js",
66 | "postbuild-npm": "./bin/postBuildNpm.sh",
67 | "test": "react-scripts test",
68 | "testTravis": "CI=true react-scripts test",
69 | "eject": "react-scripts eject",
70 | "predeploy": "npm run build",
71 | "deploy": "gh-pages -d build",
72 | "deploy-npm": "npm run build-npm && npm publish",
73 | "release": "npm run deploy && npm run deploy-npm"
74 | },
75 | "eslintConfig": {
76 | "extends": "react-app"
77 | },
78 | "browserslist": {
79 | "production": [
80 | ">0.2%",
81 | "not dead",
82 | "not op_mini all"
83 | ],
84 | "development": [
85 | "last 1 chrome version",
86 | "last 1 firefox version",
87 | "last 1 safari version"
88 | ]
89 | },
90 | "dependencies": {}
91 | }
92 |
--------------------------------------------------------------------------------
/public/apple-touch-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-114x114.png
--------------------------------------------------------------------------------
/public/apple-touch-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-120x120.png
--------------------------------------------------------------------------------
/public/apple-touch-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-144x144.png
--------------------------------------------------------------------------------
/public/apple-touch-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-152x152.png
--------------------------------------------------------------------------------
/public/apple-touch-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-57x57.png
--------------------------------------------------------------------------------
/public/apple-touch-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-72x72.png
--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | #da532c
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Validate Color
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Validate Color",
3 | "name": "Validate Color",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/public/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/mstile-144x144.png
--------------------------------------------------------------------------------
/public/validate-color-og-alt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/validate-color-og-alt.png
--------------------------------------------------------------------------------
/public/validate-color-og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/validate-color-og.png
--------------------------------------------------------------------------------
/src/app/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ForkMeOnGithub from 'fork-me-on-github';
3 | import Emoji from 'react-emojis';
4 | // Import 'validate-color' directly
5 | import validateColor from './../validate-color/index';
6 |
7 | // Import components
8 | import Input from './components/Input';
9 | import Footer from './components/Footer';
10 |
11 | // Import styles
12 | import './App.scss';
13 |
14 | class App extends Component {
15 | constructor(props){
16 | super(props)
17 | this.state = {
18 | showMessage: false, // When not set, show Emoji (default)
19 | isValid: false,
20 | inputValue: ''
21 | }
22 | }
23 |
24 | validate(color) {
25 | if (color && color !== '' && validateColor(color)) {
26 | return true;
27 | }
28 | return false;
29 | }
30 |
31 | renderValidStatus() {
32 | const {
33 | showMessage,
34 | inputValue,
35 | isValid,
36 | } = this.state;
37 | return (
38 |