Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-color-harvest
Advanced tools
Readme
react-color-harvest
is a React component that extracts colors from an image.
This repository is a fork of the unmaintained https://github.com/nitin42/react-color-extractor repository.
Design systems
Creative coding
Creating advanced color tools
npm install react-color-harvest
or if you use yarn
yarn add react-color-harvest
This package also depends on React, so make sure you've it installed.
import React from "react";
import { ColorExtractor } from "react-color-harvest";
class App extends React.Component {
state = { colors: [] };
renderSwatches = () => {
const { colors } = this.state;
return colors.map((color, id) => {
return (
<div
key={id}
style={{
backgroundColor: color,
width: 100,
height: 100,
}}
/>
);
});
};
getColors = (colors) =>
this.setState((state) => ({ colors: [...state.colors, ...colors] }));
render() {
return (
<div>
<ColorExtractor getColors={this.getColors}>
<img
src="https://i.imgur.com/OCyjHNF.jpg"
style={{ width: 700, height: 500 }}
/>
</ColorExtractor>
<div
style={{
marginTop: 20,
display: "flex",
justifyContent: "center",
}}
>
{this.renderSwatches()}
</div>
</div>
);
}
}
Check out the examples
folder.
react-color-harvest
can be used in two different ways.
<ColorExtractor getColors={colors => console.log(colors)}>
<img src="..." alt="..." style={{...}} />
</ColorExtractor>
Check out this example.
src
prop<ColorExtractor
src="<local-or-remote-image-url-or-blob-url>"
getColors={(colors) => console.log(colors)}
/>
Check out this example.
In development, make sure that you've configured proxy settings in your server config when you are using the remote images, otherwise you might run into CORS issue. You can also use this chrome extension to tackle CORS issue.
<ColorExtractor />
propsgetColors
(colors: Array<Array<number> | string>) => void
getColors
callback is invoked with an array of colors, either in hex or rgb format once the image is done processing. Use this callback to update the state with the colors array
<ColorExtractor getColors={(colors) => this.setState({ colors: colors })} />
rgb
type: boolean
When set to true
, produces the color in rgb
format. By default, colors produced are in hex format
<ColorExtractor rgb getColors={(colors) => console.log(colors)} />
This will log colors in rgb
format
onError
(error: Object) => void
onError
callback is invoked if there is any issue with processing the image.
<ColorExtractor onError={error => this.setState({ hasError: true , msg: error })}>
src
type: string
src
prop accepts a remote or local image url, or a blob url.
<ColorExtractor
src="https://i.imgur.com/OCyjHNF.jpg"
getColors={(colors) => console.log(colors)}
/>
maxColors
type: number
maxColors
prop accepts a number for amount of colors in palette from which swatches will be generated.
<ColorExtractor src="..." getColors={colors => ...} maxColors={128} />
If you like to contribute to this project, fork the repo and then follow the below instructions to setup the project locally on your machine.
git clone https://github.com/<your_username_here>/react-color-harvest
cd react-color-harvest
yarn
Run yarn build:component
to build the source code.
flow
to typescript
FAQs
A React component which extracts colors from an image
The npm package react-color-harvest receives a total of 4 weekly downloads. As such, react-color-harvest popularity was classified as not popular.
We found that react-color-harvest demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.