React UI Components Documentation

Sets or gets the delay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} delay={100} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} disabled={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the imgSrc property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'} imgHeight={14}
             imgWidth={14} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the imgWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} imgPosition={left} imgSrc={https://jqwidgets.com/jquery-widgets-demo/images/andrew.png} imgHeight={14}
             imgWidth={14} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the imgHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} imgPosition={left} imgSrc={https://jqwidgets.com/jquery-widgets-demo/images/andrew.png} imgHeight={14}
             imgWidth={14} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the imgPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the roundedCorners property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} roundedCorners={'top'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} rtl={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the textPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} textPosition={'right'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the textImageRelation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'} textImageRelation={'imageBeforeText'}
             />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} theme={'energyblue'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} template={'success'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the toggled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} toggled={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={240} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} value={'Button'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the button is clicked.

Code examples

Bind to the click event of jqxButton.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.on('click', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.check();
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.destroy();
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.focus();
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.render();
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.toggle();
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButton.unCheck();
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myButton.val('New Text');
    }

    render() {               
        return (
            <JqxButton ref='myButton' width={120} height={40} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));