/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250} color={'#ffff00'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the color mode.

'hue'

'saturation'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250} colorMode={'hue'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the color picker.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the color picker.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the showTransparent property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250} showTransparent={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the color picker.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a new color is picked.

Code examples

Bind to the colorchange event of jqxColorPicker.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();  
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} onColorchange={this.onColorchange} 
        width={250} height={250}
      />
    );
  }
 
  private onColorchange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the color.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();
 
  public componentDidMount(): void {
    this.myColorPicker.current!.getColor();
  }
   
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a color.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxColorPicker, { IColorPickerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
 
class App extends React.PureComponent<{}, IColorPickerProps> {
  private myColorPicker = React.createRef<JqxColorPicker>();
 
  public componentDidMount(): void {
    this.myColorPicker.current!.setColor('#ffaaff');
  }
   
  
  public render() {
    return (
      <JqxColorPicker ref={this.myColorPicker} 
        width={250} height={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);