React UI Components Documentation

Sets or gets the autoOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} autoOpen={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the html property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} html={'custom HTML string'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the isModal property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} isModal={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the imagePosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} imagePosition={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the text property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} text={'Loading files...'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the textPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} textPosition={'left'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user creates loader for the first time.

Code examples

Bind to the create event of jqxLoader.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLoader.on('create', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLoader.close();
    }

    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLoader from 'jqwidgets-react/react_jqxloader.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLoader.open();
    }

    render() {             
        return (
            <JqxLoader ref='myLoader'
                width={100} height={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));