color-pallate-react
v1.1.53
Published
Selecting Color from pallate
Downloads
144
Maintainers
Readme
color-pallate-react
To apply the color(There are 2 types of pallates) This library is small example of how selected color from color-pallate and it returns the selected Color.
Install
npm install --save color-pallate-react
or
yarn add color-pallate-react
Props
PROPNAME PROPTYPE
setColorPallate funtion
selectedIndex number
height number
width number
padding number
borderRadius number
Pallate-1
import React, { Component } from 'react'
import ExampleComponent from 'color-pallate-react'
export default class App extends Component {
constructor(props){
super(props)
this.state={
colorSelected:'',
selectedIndex:0,
colours:[{color: '#98AAB3', isSelect: false},
{color: '#8F7EE6', isSelect: false},
{color: '#00AAFF', isSelect: false},
{color: '#30BFBF', isSelect: false},
{color: '#47CC8A', isSelect: false},
{color: '#8ACC47', isSelect: false},
{color: '#FFD500', isSelect: false},
{color: '#FF9F1A', isSelect: false}
]
}
}
setColorPallate =(color,index)=> {
this.setState({colorSelected:color,selectedIndex:index})
console.log("selected Color",color)
};
render () {
console.log("the color and index are --",this.state.colorSelected,this.state.selectedIndex)//to see the output
return (
<div>
// If props are not sent then default props are sent
<ExampleComponent setColorPallate={this.setColorPallate} />
// If props are sent
<ExampleComponent setColorPallate={this.setColorPallate} height={7} width={7} padding={15} borderRadius={20} selectedIndex={this.state.selectedIndex} colours={this.state.colours}/>
</div>
)
}
}
Props
PROPNAME PROPTYPE
setColorPallate funtion
selectedIndex number
Pallate-2
import React, { Component } from 'react'
import {CheckColorPallate} from 'color-pallate-react'
export default class Pallate extends Component {
constructor(props){
super(props)
this.state={
colorSelected:'',
selectedIndex:0
}
}
setColorPallate =(color,index)=> {
this.setState({colorSelected:color,selectedIndex:index})
console.log("selected Color",color)
};
render () {
console.log("the color and index are --",this.state.colorSelected,this.state.selectedIndex)//to see the output
return (
<div>
<CheckColorPallate setColorPallate={this.setColorPallate} selectedIndex={this.state.selectedIndex}/>
</div>
)
}
}
License
MIT © RituAnand