react-eyedropper

Screenshots

Install

npm install --save react-eyedropper

Usage

import React, { Component } from 'react'
import EyeDropper from 'react-eyedropper'

class App extends Component {
  state = {
    r: 255,
    g: 255,
    b: 255
  }
  setColor = ({ r, g, b }) => {
    this.setState({ r, g, b })
  }
  render() {
    const {r, g, b} = this.state
    return (
      <div>
        <div className="main">
          <div className="container first">rgb(106, 0, 0)</div>
          <div className="container second">rgb(106, 124, 0)</div>
          <div className="container third">rgb(106, 124, 138)</div>
          <div className="container fourth">rgb(15, 124, 138)</div>
          <div className="container fifth">rgb(15, 44, 138)</div>
          <div className="container sixth">rgb(219, 238, 97)</div>
          <div className="container seventch">gradient</div>
        </div>
          <div className="result">
            <div className="container " style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}}>rgb({r}, {g}, {b})</div>
          </div>
        <div className="eye-drop-container">
          <EyeDropper initializedColor={this.setColor}/>
        </div>
        <div id="container">
              <img src="./test.jpg" id="sample"/>
          </div>
      </div>
    )
  }
}

API

<EyeDropper initializedColor={this.setColor}/>

props	description
initializedColor	Type: function , required callback, arg is object {r,g,b}
onInit	Type: function , pre condition
className	Type: string, for style
title	Type: string, title

Dependencies

https://github.com/bfred-it/get-canvas-pixel-color/
https://github.com/niklasvh/html2canvas

License

ISC