Color-pallate-react NPM

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>
    )
  }
}