Nebulous Puffy Marshmallows
    Wondering what’s next for npm?Check out our public roadmap! »

    react-color-gradient-picker

    0.1.2 • Public • Published

    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

    Install

    npm i react-color-gradient-picker

    DownloadsWeekly Downloads

    62

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    290 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar