# color-pallate-react

> Selecting Color from pallate

Latest version **1.1.53** (published 2019-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install color-pallate-react
pnpm add color-pallate-react
yarn add color-pallate-react
bun add color-pallate-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.53 |
| Published | 2019-10-03 |
| First published | 2019-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 74.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | RituAnand |
| Maintainers | kumariritu |
| Keywords | react, selectColor, ColorPicker |

## Links

- npm: https://www.npmjs.com/package/color-pallate-react
- Repository: https://github.com/RituAnand/React-Color-Pallate
- Homepage: https://github.com/RituAnand/React-Color-Pallate#readme
- Issues: https://github.com/RituAnand/React-Color-Pallate/issues
- npm.io page: https://npm.io/package/color-pallate-react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.53 (latest) — 2019-10-03
- 1.0.53 — 2019-10-03
- 1.0.52 — 2019-10-03
- 1.0.51 — 2019-07-19
- 1.0.50 — 2019-07-19
- 1.0.49 — 2019-06-06
- 1.0.48 — 2019-06-06
- 1.0.47 — 2019-06-06
- 1.0.46 — 2019-06-06
- 1.0.45 — 2019-06-06
- 1.0.44 — 2019-06-06
- 1.0.43 — 2019-06-06
- 1.0.42 — 2019-06-06
- 1.0.41 — 2019-06-06
- 1.0.40 — 2019-06-06
- … 40 more at https://npm.io/package/color-pallate-react/versions

## 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.

[![NPM](https://img.shields.io/npm/v/color-pallate-react.svg)](https://www.npmjs.com/package/color-pallate-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save color-pallate-react 
or
yarn add color-pallate-react
```
### Props
```bash
PROPNAME           PROPTYPE

setColorPallate    funtion 
selectedIndex      number 
height             number
width              number
padding            number
borderRadius       number
```

## Pallate-1

```jsx
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
```bash
PROPNAME           PROPTYPE

setColorPallate    funtion 
selectedIndex      number 
```

## Pallate-2

```jsx
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](https://github.com/RituAnand)

---
_Source: https://npm.io/package/color-pallate-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._