<!-- ColorConverter -->
<script
  crossorigin="anonymous"
  src="https://unpkg.com/@wilfredlopez/color-converter@1.0.8/dist/index.umd.js"
></script>
<!-- ReactColorPicker -->
<script src="https://unpkg.com/react-color-palette-picker@latest/build/index.umd.js"></script>

PROPS

interface ColorPickerProps {
  /**
   * The width of the color picker.
   */
  width?: number
  /**
   * The height of the color picker.
   */
  height?: number
  /**
   * Color in the `ColorConverter` or color string.
   * @type { ColorConverter } ColorConverter `https://www.npmjs.com/package/@wilfredlopez/color-converter`
   */
  color?: string | ColorConverter
  /**
   * The function that accepts the updated `color` and a `colorConverter` as arguments.
   * @ColorConverter `https://www.npmjs.com/package/@wilfredlopez/color-converter`
   */
  onChange?: (color: string, convertedColor: ColorConverter) => void
  /**
   * classNames to override the defaults
   */
  pickerClasses?: ColorPickerClasses
  /**
   * Show or hide the hex and rgb inputs.
   */
  hideControls?: boolean
}

interface ColorPickerClasses {
  container?: string
  controlsContainer?: string
  saturation?: {
    container?: string
    saturationCursor?: string
    canvas?: string
  }
  hueBar?: {
    container?: string
    cursorClass?: string
  }
  fields?: {
    container?: string
    inputs?: string
  }
}

`USE`

import { render } from 'react-dom'
import { useState } from 'react'
import { ReactColorPicker } from 'react-color-palette-picker'
//peer-dependency
import { ColorConverter } from '@wilfredlopez/color-converter'

//Default Styles or use your own by providing prop `pickerClasses`
import 'react-color-palette-picker/build/index.css'

function App() {
  const [color, setColor] = useState('red')
  const [allColors, setAllColors] = useState<ColorConverter[]>([])
  return (
    <div>
      <h1 style={{ textAlign: 'center' }}>React Color Picker</h1>
      <ReactColorPicker
        width={400}
        height={250}
        color={color}
        onChange={(color, colorConverter) => {
          setColor(color)
          setAllColors(colorConverter.all())
          console.log(colorConverter.toColorObject())
        }}
      />
      <p style={{ textAlign: 'center' }}>{color}</p>
      <div style={{ textAlign: 'center', maxWidth: 400, margin: 'auto' }}>
        {allColors.map(c => {
          return (
            <div
              style={{
                background: `#${c.hex}`,
                color: c.getContrast().hexString(),
              }}
              key={c.hex}
            >
              #{c.hex}
            </div>
          )
        })}
      </div>
    </div>
  )
}

render(<App />, document.getElementById('root'))

UMD Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- STYLES -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/react-color-palette-picker@latest/build/index.css"
  />

  <body>
    <div id="root"></div>
    <!-- React, ReactDOM -->
    <script
      crossorigin="anonymous"
      src="https://unpkg.com/react@latest/umd/react.production.min.js"
    ></script>
    <script
      crossorigin="anonymous"
      src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"
    ></script>
    <!-- ColorConverter -->
    <script
      crossorigin="anonymous"
      src="https://unpkg.com/@wilfredlopez/color-converter@1.0.8/dist/index.umd.js"
    ></script>
    <!-- ReactColorPicker -->
    <script src="https://unpkg.com/react-color-palette-picker@latest/build/index.umd.js"></script>
    <script>
      const ReactColorPicker = window.ReactColorPicker

      const RootElement = document.getElementById('root')
      ReactDOM.render(React.createElement(ReactColorPicker), RootElement)
    </script>
  </body>
</html>

Keywords

FAQs

What is react-color-palette-picker?

Is react-color-palette-picker well maintained?

Package last updated on 15 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-color-palette-picker

ReactColorPicker

Instalation

NPM

Yarn

unpkg

PROPS

USE

UMD Example

Keywords

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases

`USE`