Skip to content

mue/react-color-gradient-picker

This branch is 1 commit ahead of arthay/react-color-gradient-picker:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bee3b92 · Jul 11, 2023

History

33 Commits
May 22, 2020
Jul 6, 2020
May 22, 2020
May 22, 2020
May 22, 2020
May 22, 2020
Jul 6, 2020
May 22, 2020
Oct 11, 2020
May 22, 2020
May 22, 2020
Jul 11, 2023
Jul 11, 2023
May 22, 2020

Repository files navigation

React Color Gradient Picker

Table of Contents

Installation

To install, you can use npm or yarn:

$ npm install react-color-gradient-picker
$ yarn add react-color-gradient-picker

Examples

Here is a simple examples of react-color-gradient-picker being used in an app:

Color Picker

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'react-color-gradient-picker';
import 'react-color-gradient-picker/dist/index.css';

const color = {
    red: 255,
    green: 0,
    blue: 0,
    alpha: 1,
};

function App() {
    const [colorAttrs, setColorAttrs] = useState(color);
    
    const onChange = (colorAttrs) => {
        setColorAttrs(colorAttrs);
    };
  
    return (
        <ColorPicker
            onStartChange={onChange}
            onChange={onChange}
            onEndChange={onChange}
            color={colorAttrs}
        />

    );
}

ReactDOM.render(<App />, document.getElementById('app-id'));

Gradient Color Picker

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'react-color-gradient-picker';
import 'react-color-gradient-picker/dist/index.css';

const gradient = {
    points: [
        {
            left: 0,
            red: 0,
            green: 0,
            blue: 0,
            alpha: 1,
        },
        {
            left: 100,
            red: 255,
            green: 0,
            blue: 0,
            alpha: 1,
        },
    ],
    degree: 0,
    type: 'linear',
};

function App() {
    const [gradientAttrs, setGradientAttrs] = useState(gradient);
    
    const onChange = (gradientAttrs) => {
        setGradientAttrs(gradientAttrs);
    };
  
    return (
        <ColorPicker
            onStartChange={onChange}
            onChange={onChange}
            onEndChange={onChange}
            gradient={gradientAttrs}
            isGradient
        />

    );
}

ReactDOM.render(<App />, document.getElementById('app-id'));

Demo

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 77.1%
  • SCSS 20.2%
  • HTML 2.7%