This (text inside the boxes are all the same color because you can't know what is the background of the dynamic box will be) :
will turn into this : (the color of the text inside the boxes are changing depending on the background of the dynamic boxes )
see example sourcecode
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
npm install the-simplest-color-checker --saveimport {checkColor} from 'the-simplest-color-checker'Use it as below
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"
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>
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;
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"
}
});
},
};
See the [open issues](https://github.com/amans199/the-simplest-color-checker/issues) for a list of proposed features (and known issues).
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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Ahmed Mansour - @amans199 - ahmed.ouda1997@gmail.com
Project Link: https://github.com/amans199/the-simplest-color-checker