React UI Components Documentation

Sets or gets the color property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250} color={'#ffff00'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250} colorMode={'hue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showTransparent property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250} showTransparent={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a new color is picked.

Code examples

Bind to the colorchange event of jqxColorPicker.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myColorPicker.on('colorchange', (event) => {
            // Do Something...
        });
    }

    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myColorPicker.getColor();
    }

    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxColorPicker from 'jqwidgets-react/react_jqxcolorpicker.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myColorPicker.setColor('#ffaaff');
    }

    render() {            
        return (
            <JqxColorPicker ref='myColorPicker'
                 width={250} height={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));