Right-to-Left Support
DevExtreme React Editors is a collection of 15+ UI components for data editing with integrated client-side data validation. The components can operate in controlled or uncontrolled state mode and can be used with Redux. They support advanced UI customization using template components and render props. Declared PropTypes for typechecking are included as well. Learn more about DevExtreme React components.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React from 'react';
import { NumberBox } from 'devextreme-react/number-box';
import { SelectBox } from 'devextreme-react/select-box';
import { Switch } from 'devextreme-react/switch';
import { TextBox } from 'devextreme-react/text-box';
import { Autocomplete } from 'devextreme-react/autocomplete';
import { CheckBox } from 'devextreme-react/check-box';
import { TextArea } from 'devextreme-react/text-area';
import { TagBox } from 'devextreme-react/tag-box';
import {
europeanUnion, numberBoxLabel, notesLabel, nameLabel, textBoxLabel,
europeanUnionDataLabel, languageLabel, autocompleteLabel,
} from './data.js';
class App extends React.Component {
constructor() {
super();
this.state = {
rtlEnabled: false,
};
this.languages = [
'Arabic: Right-to-Left direction',
'English: Left-to-Right direction',
];
this.displayExpr = 'nameEn';
this.textValue = 'text';
this.tagBoxDefaultValue = [europeanUnion[0].id];
this.onLanguageChanged = this.onLanguageChanged.bind(this);
}
onLanguageChanged(args) {
const isRTL = args.value === this.languages[0];
this.displayExpr = isRTL ? 'nameAr' : 'nameEn';
this.setState({ rtlEnabled: isRTL });
this.textValue = isRTL ? 'نص' : 'text';
}
render() {
return (
<div>
<div className={this.state.rtlEnabled ? 'dx-rtl' : null}>
<div className="options">
<div className="caption">Options</div>
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Language</div>
<div className="dx-field-value">
<SelectBox
items={this.languages}
inputAttr={languageLabel}
defaultValue={this.languages[1]}
rtlEnabled={this.state.rtlEnabled}
onValueChanged={this.onLanguageChanged}
/>
</div>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Text Box</div>
<div className="dx-field-value">
<TextBox
showClearButton={true}
inputAttr={textBoxLabel}
defaultValue={this.textValue}
rtlEnabled={this.state.rtlEnabled}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Number Box</div>
<div className="dx-field-value">
<NumberBox
showSpinButtons={true}
defaultValue="123"
rtlEnabled={this.state.rtlEnabled}
inputAttr={numberBoxLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Select Box</div>
<div className="dx-field-value">
<SelectBox
items={europeanUnion}
inputAttr={europeanUnionDataLabel}
defaultValue={europeanUnion[0]}
rtlEnabled={this.state.rtlEnabled}
displayExpr={this.displayExpr}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Tag Box</div>
<div className="dx-field-value">
<TagBox
items={europeanUnion}
defaultValue={this.tagBoxDefaultValue}
rtlEnabled={this.state.rtlEnabled}
inputAttr={nameLabel}
displayExpr={this.displayExpr}
placeholder="..."
valueExpr="id"
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Text Area</div>
<div className="dx-field-value">
<TextArea
defaultValue={this.textValue}
rtlEnabled={this.state.rtlEnabled}
inputAttr={notesLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Autocomplete</div>
<div className="dx-field-value">
<Autocomplete
items={europeanUnion}
rtlEnabled={this.state.rtlEnabled}
valueExpr={this.displayExpr}
inputAttr={autocompleteLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Check Box</div>
<div className="dx-field-value">
<CheckBox
defaultValue={true}
text={this.textValue}
rtlEnabled={this.state.rtlEnabled}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Switch</div>
<div className="dx-field-value">
<Switch
rtlEnabled={this.state.rtlEnabled}
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.options .dx-fieldset {
margin: 0;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
padding-right: 15px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
export const europeanUnion = [{
id: 1,
nameAr: 'النمسا',
nameEn: 'Austria',
}, {
id: 2,
nameAr: 'بلجيكا',
nameEn: 'Belgium',
}, {
id: 3,
nameAr: 'بلغاريا',
nameEn: 'Bulgaria',
}, {
id: 4,
nameAr: 'كرواتيا',
nameEn: 'Croatia',
}, {
id: 5,
nameAr: 'قبرص',
nameEn: 'Cyprus',
}, {
id: 6,
nameAr: 'الجمهورية التشيكية',
nameEn: 'Czech Republic',
}, {
id: 7,
nameAr: 'الدنمارك',
nameEn: 'Denmark',
}, {
id: 8,
nameAr: 'استونيا',
nameEn: 'Estonia',
}, {
id: 9,
nameAr: 'فنلندا',
nameEn: 'Finland',
}, {
id: 10,
nameAr: 'فرنسا',
nameEn: 'France',
}, {
id: 11,
nameAr: 'ألمانيا',
nameEn: 'Germany',
}, {
id: 12,
nameAr: 'يونان',
nameEn: 'Greece',
}, {
id: 13,
nameAr: 'هنغاريا',
nameEn: 'Hungary',
}, {
id: 14,
nameAr: 'أيرلندا',
nameEn: 'Ireland',
}, {
id: 15,
nameAr: 'إيطاليا',
nameEn: 'Italy',
}, {
id: 16,
nameAr: 'لاتفيا',
nameEn: 'Latvia',
}, {
id: 17,
nameAr: 'ليتوانيا',
nameEn: 'Lithuania',
}, {
id: 18,
nameAr: 'لوكسمبورغ',
nameEn: 'Luxembourg',
}, {
id: 19,
nameAr: 'مالطا',
nameEn: 'Malta',
}, {
id: 20,
nameAr: 'هولندا',
nameEn: 'Netherlands',
}, {
id: 21,
nameAr: 'بولندا',
nameEn: 'Poland',
}, {
id: 22,
nameAr: 'البرتغال',
nameEn: 'Portugal',
}, {
id: 23,
nameAr: 'رومانيا',
nameEn: 'Romania',
}, {
id: 24,
nameAr: 'سلوفاكيا',
nameEn: 'Slovakia',
}, {
id: 25,
nameAr: 'سلوفينيا',
nameEn: 'Slovenia',
}, {
id: 26,
nameAr: 'إسبانيا',
nameEn: 'Spain',
}, {
id: 27,
nameAr: 'السويد',
nameEn: 'Sweden',
}, {
id: 28,
nameAr: 'المملكة المتحدة',
nameEn: 'United Kingdom',
}];
export const numberBoxLabel = { 'aria-label': 'Number Box' };
export const notesLabel = { 'aria-label': 'Notes' };
export const nameLabel = { 'aria-label': 'Name' };
export const dateLabel = { 'aria-label': 'Date' };
export const textBoxLabel = { 'aria-label': 'Text Box' };
export const passwordLabel = { 'aria-label': 'Password' };
export const maskLabel = { 'aria-label': 'Mask' };
export const emailLabel = { 'aria-label': 'Email' };
export const cityLabel = { 'aria-label': 'City' };
export const addressLabel = { 'aria-label': 'Address' };
export const languageLabel = { 'aria-label': 'Language' };
export const europeanUnionDataLabel = { 'aria-label': 'European Union Data' };
export const autocompleteLabel = { 'aria-label': 'Autocomplete' };
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'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@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.6/cjs',
'devextreme-react': 'npm:devextreme-react@23.1.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.2/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.49/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/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',
// 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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);