Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/scriptex/react-dropper

Pick a color from any image in React
https://github.com/scriptex/react-dropper

colorpicker react-component

Last synced: 9 days ago
JSON representation

Pick a color from any image in React

Host: GitHub
URL: https://github.com/scriptex/react-dropper
Owner: scriptex
License: mit
Created: 2019-04-21T05:32:25.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-05-02T01:57:25.000Z (6 months ago)
Last Synced: 2024-05-02T06:13:51.792Z (6 months ago)
Topics: colorpicker, react-component
Language: TypeScript
Homepage: https://react-dropper.atanas.info
Size: 8.28 MB
Stars: 5
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        [![Travis CI](https://travis-ci.com/scriptex/react-dropper.svg?branch=master)](https://travis-ci.com/scriptex/react-dropper)

[![Github Build](https://github.com/scriptex/react-dropper/workflows/Build/badge.svg)](https://github.com/scriptex/react-dropper/actions?query=workflow%3ABuild)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/react-dropper/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/react-dropper&utm_campaign=Badge_Grade)

[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-react-dropper-master)

[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/react-dropper/badge)](https://www.codefactor.io/repository/github/scriptex/react-dropper)

[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)

[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/react-dropper/README.md?pixel)](https://github.com/scriptex/react-dropper/)

# React Dropper

> Pick a color from any image in React

## Visitor stats

![GitHub stars](https://img.shields.io/github/stars/scriptex/react-dropper?style=social)

![GitHub forks](https://img.shields.io/github/forks/scriptex/react-dropper?style=social)

![GitHub watchers](https://img.shields.io/github/watchers/scriptex/react-dropper?style=social)

![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)

## Code stats

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/react-dropper)

![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/react-dropper?style=plastic)

![GitHub language count](https://img.shields.io/github/languages/count/scriptex/react-dropper?style=plastic)

![GitHub top language](https://img.shields.io/github/languages/top/scriptex/react-dropper?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/react-dropper?style=plastic)

## Install

```sh

npm i react-dropper

# or

yarn add react-dropper

```

## Demo

This component allows you to pick any color from any image rendered in a React application. See [the demo here](https://react-dropper.atanas.info).

## Usage

```javascript

import React from 'react';

import { Dropper } from 'react-dropper';

import MyImage from '../images/image.jpg';

ReactDOM.render(

   {

      // The color is the selected color

      // The event is the event type - click, mousemove, etc

    }}

  />,

  document.getElementById('demo')

);

```

## Props

| Prop        | Type       | Required | Default                                  | Description                                                           |

| ----------- | ---------- | -------- | ---------------------------------------- | --------------------------------------------------------------------- |

| `image`     | `string`   | true     | ''                                       | URL of the image asset (JPG or PNG) -CORS enabled for external assets |

| `width`     | `number`   | false    | 300                                      | Width of the canvas area (in px)                                      |

| `height`    | `number`   | false    | 150                                      | Height of the canvas area (in px)                                     |

| `className` | `string`   | false    | 'react-dropper'                          | CSS classname for the rendered element                                |

| `onChange`  | `function` | false    | (color: string, type: string) => unknown | An optional function which accepts two arguments                      |

The `onChange` function accepts two arguments:

- `color`: the selected color

- `type`: the type of the event - 'click', 'mousemove', etc. Useful when deciding whether you want to store the color or not.

## LICENSE

MIT

---



    Connect with me:








    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    



---



Support and sponsor my work: