React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS Number Input demo. To switch an editor to a right-to-left representation, just enable a single property - "rtl". When this property is on, text flows from right to left in an editor and the editor itself is mirrored (the layout of its UI elements is reversed).

Number

Percentage

Currency

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title id="Description">
        ReactJS Number Input demo. To switch an editor to a right-to-left representation, just enable a single property - "rtl". When this property is on, text flows from right to left in an editor and the editor itself is mirrored (the layout of its UI elements is reversed).
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/demos.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom: 3em">
        ReactJS Number Input demo. To switch an editor to a right-to-left representation, just enable a single property - "rtl". When this property is on, text flows from right to left in an editor and the editor itself is mirrored (the layout of its UI elements is reversed).
    </div>
    <div id="app"></div>
    <script src="../build/numberinput_righttoleftlayout.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxNumberInput from '../../../jqwidgets-react/react_jqxnumberinput.js';

class App extends React.Component {
    render() {
        return (
            <div id='jqxWidget' style={{ fontSize: 13, fontFamily: 'Verdana', float: 'left' }}>

                <div style={{ marginTop: 10 }}>Number</div>
                <JqxNumberInput ref='numericInput' style={{ marginTop: 3 }}
                    rtl={true} inputMode={'simple'}
                    width={250} height={25} spinButtons={true}
                />

                <div style={{ marginTop: 10 }}>Percentage</div>
                <JqxNumberInput ref='percentageInput' style={{ marginTop: 3 }}
                    rtl={true}
                    width={250} height={25}
                    digits={3} symbolPosition={'right'}
                    symbol={'%'} spinButtons={true}
                />

                <div style={{ marginTop: 10 }}>Currency</div>
                <JqxNumberInput ref='currencyInput' style={{ marginTop: 3 }}
                    rtl={true}
                    width={250} height={25}
                    symbol={'$'} spinButtons={true}
                />
                
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));