Backend API
import React, { useCallback, useState } from 'react';
import ColorBox, { type ColorBoxTypes } from 'devextreme-react/color-box';
const defaultModeLabel = { 'aria-label': 'Default mode' };
const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' };
const customButtonCaptionsLabel = { 'aria-label': 'Custom button captions' };
const readOnlyLabel = { 'aria-label': 'Read only' };
const disabledLabel = { 'aria-label': 'Disabled' };
const eventHandlingLabel = { 'aria-label': 'Event Handling' };
function App() {
const [color, setColor] = useState('#f05b41');
const handleColorChange = useCallback(({ value }: ColorBoxTypes.ValueChangedEvent) => {
setColor(value);
}, []);
return (
<div className="form">
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Default mode</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
inputAttr={defaultModeLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With alpha channel editing</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
editAlphaChannel
inputAttr={alphaChannelLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Custom button captions</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
applyButtonText="Apply"
cancelButtonText="Decline"
inputAttr={customButtonCaptionsLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Read only</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
readOnly={true}
inputAttr={readOnlyLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Disabled</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
disabled={true}
inputAttr={disabledLabel}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">Event Handling</div>
<div className="hero-block">
<div className="color-block">
<svg className="brush" width="360" height="254" style={{ color }}>
<use href="../../../../images/Brush.svg#brush"></use>
</svg>
<svg className="superhero dx-color-icon" width="360" height="254">
<use href="../../../../images/Hero.svg#hero"></use>
</svg>
</div>
<div className="hero-color-box">
<ColorBox
value={color}
applyValueMode="instantly"
inputAttr={eventHandlingLabel}
onValueChanged={handleColorChange}
/>
</div>
</div>
</div>
</div>
);
}
export default App;
import React, { useCallback, useState } from 'react';
import ColorBox from 'devextreme-react/color-box';
const defaultModeLabel = { 'aria-label': 'Default mode' };
const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' };
const customButtonCaptionsLabel = { 'aria-label': 'Custom button captions' };
const readOnlyLabel = { 'aria-label': 'Read only' };
const disabledLabel = { 'aria-label': 'Disabled' };
const eventHandlingLabel = { 'aria-label': 'Event Handling' };
function App() {
const [color, setColor] = useState('#f05b41');
const handleColorChange = useCallback(({ value }) => {
setColor(value);
}, []);
return (
<div className="form">
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Default mode</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
inputAttr={defaultModeLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With alpha channel editing</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
editAlphaChannel
inputAttr={alphaChannelLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Custom button captions</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
applyButtonText="Apply"
cancelButtonText="Decline"
inputAttr={customButtonCaptionsLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Read only</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
readOnly={true}
inputAttr={readOnlyLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Disabled</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
disabled={true}
inputAttr={disabledLabel}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">Event Handling</div>
<div className="hero-block">
<div className="color-block">
<svg
className="brush"
width="360"
height="254"
style={{ color }}
>
<use href="../../../../images/Brush.svg#brush"></use>
</svg>
<svg
className="superhero dx-color-icon"
width="360"
height="254"
>
<use href="../../../../images/Hero.svg#hero"></use>
</svg>
</div>
<div className="hero-color-box">
<ColorBox
value={color}
applyValueMode="instantly"
inputAttr={eventHandlingLabel}
onValueChanged={handleColorChange}
/>
</div>
</div>
</div>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(<App />, document.getElementById('app'));
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.form {
min-height: 690px;
}
.form .dx-field-value {
text-align: right;
}
.dx-fieldset-header {
padding: 10px 0;
}
.color-block {
width: 360px;
height: 254px;
position: relative;
}
.hero-color-box {
position: absolute;
right: 0;
left: 400px;
top: 110px;
}
.superhero,
.brush {
position: absolute;
height: 100%;
width: 100%;
}
.hero-block {
position: relative;
}
.brush {
color: #f05b41;
}
You can hide the editor's drop-down button to allow users to only type in a color code. To do this, disable the showDropDownButton property. Users can also edit the transparency of the selected shade if the editAlphaChannel property is set to true.
Configure the ColorBox
Use the following properties to specify the component's interactivity:
-
readOnly
Specifies whether the ColorBox is read-only. -
disabled
Specifies whether the ColorBox responds to user interaction.
You can specify the following properties to add custom buttons into the input field, or configure the drop-down editor's buttons:
-
buttons
Allows you to add custom buttons to the input text field. -
showClearButton
Specifies whether to display the Clear button in the ColorBox. -
applyButtonText
Specifies the text for the button that applies changes and closes the drop-down editor. -
cancelButtonText
Specifies the text for the button that cancels changes and closes the drop-down editor.
Handle Value Change
Implement the onValueChanged function to handle the value change when users select a color in the drop-down editor. To handle the input value change, use the onInput function.