React UI Components Documentation

Sets or gets the alwaysShowNavigationArrows property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} alwaysShowNavigationArrows={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} animationType={'fade'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} animationDuration={500}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoSeparators property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} autoSeparators={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the backLabel property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} backLabel={'Back Button'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} disabled={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableScrolling property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} enableScrolling={false}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterCallback property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} filterCallback={filterCallback}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} height={500}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the headerAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} headerAnimationDuration={500}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} placeHolder={'Search items...'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the readOnly property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} readOnly={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} rtl={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the roundedCorners property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} roundedCorners={false}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showNavigationArrows property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} showNavigationArrows={false}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showFilter property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} showFilter={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showHeader property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} showHeader={false}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showBackButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} showBackButton={true}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'} theme={'energyblue'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    render() {            
        return (
            <Jqx ref=''
                width={'50%'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myListMenu.back();
    }

    render() {            
        return (
            <Jqx ref=''
                width={'50%'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myListMenu.changePage(Item);
    }

    render() {            
        return (
            <Jqx ref=''
                width={'50%'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {            
        return (
            <Jqx ref=''
                width={'50%'}>
                <ul data-role="listmenu">
                    <li>
                        OSI  
                    </li>
                    <li>
                        TCP/IP
                    </li>
                </ul>
            </JqxListMenu>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));