@xt-plugins/color-gradient-picker

Color Gradient Picker

Table of Contents

• Installation
• Examples

Installation

To install, you can use npm or yarn:

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

Examples

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

Default Picker

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

function App() {
    const [colorAttrs, setColorAttrs] = useState('rgba(0, 144, 255, 1)');
    
    const onChange = (colorAttrs) => {
        setColorAttrs(colorAttrs);
    };
  
    return (
        <ColorPicker.DefaultPicker
            onChange={onChange}
            onlySolid
            value={colorAttrs}
        />

    );
}

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

Custom Picker

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

function App() {
    const [color, setColor] = useState('linear-gradient(rgba(0, 144, 255, 1) 0%, rgba(0, 72, 128, 1) 100%)');
    
    const onChange = (gradientAttrs) => {
        setColor(gradientAttrs);
    };
  
    return (
        <ColorPicker.AutoPicker
            value={color}
            onChange={onChange}
        />

    );
}

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