The-simplest-color-checker NPM

Installation

npm install the-simplest-color-checker --save

import {checkColor} from 'the-simplest-color-checker'

Usage

1- import the checkColor module into your project and add the selector as following :

import {checkColor} from 'the-simplest-color-checker'
checkColor({
  selector:".colors_box" //add any selector,
  optimize_text_color: true, //change text color depending on the background
  ifDark:{
    textColor:"#f00"
  },
  ifLight:{
    textColor:"#00f"
  }
});

2- Add data-color to all elements with the value of the color you wanna test;

data-color="#000"

the previous line will result with a data-brightness="dark"

Examples

This :

    <span data-color="#000" class="colors_box"></span>
    <span data-color="#fff" class="colors_box"></span>
    <span data-color="#f00" class="colors_box"></span>

will result :

    <span data-color="#000" class="colors_box" data-brightness="dark"></span>
    <span data-color="#fff" class="colors_box" data-brightness="light"></span>
    <span data-color="#f00" class="colors_box" data-brightness="light"></span>

Using the-simplest-color-checker in React app:

import { Component } from 'react';
import {checkColor} from 'the-simplest-color-checker'
class App extends Component {
  componentDidMount(){
    checkColor({
      selector: ".colors_box", //add any selector
      optimize_text_color: true, //change text color depending on the background,
      ifDark:{
        textColor:"#fff"
      },
      ifLight:{
        textColor:"#000"
      }
    })
  }
      render() {
        return (
          <div className="App">
              <div className="boxes">
                <span data-color="#000" className="colors_box">color box</span>
                  <span data-color="#fff" className="colors_box">color box</span>
                  <span data-color="#0f0" className="colors_box">color box</span>
                  <span data-color="#00f" className="colors_box">color box</span>
                  <span data-color="#f00" className="colors_box">color box</span>
              </div>
          </div>
        );
    }
}

export default App;

Using the-simplest-color-checker in Vue app:

import { checkColor } from "the-simplest-color-checker";
export default {
 mounted() {
    checkColor({
      selector: ".colors_box", //add any selector
      optimize_text: true,
      ifDark:{
        textColor:"#fff"
      },
      ifLight:{
        textColor:"#000"
      }
    });
  },
};

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.