React UI Components Documentation

Sets or gets the alterTextCase property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} alterTextCase={'titleCase'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayLimit property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} displayLimit={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayValue property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} displayValue={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the fontSizeUnit property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} fontSizeUnit={'em'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} height={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxColor property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} maxColor={'darkgreen'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxFontSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} maxFontSize={5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxValueToDisplay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} maxValueToDisplay={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minColor property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} minColor={'lime'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minFontSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} minFontSize={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minValueToDisplay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} minValueToDisplay={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the sortBy property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} sortBy={'label'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the sortOrder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} sortOrder={'descending'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tagRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} tagRenderer={tagRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the takeTopWeightedItems property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} takeTopWeightedItems={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the textColor property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} textColor={'red'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the urlBase property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} urlBase={'http://jqwidgets.com/'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the urlMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'} urlMember={'tagHref'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the valueMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the widget has completed binding to a dataAdapter.

Code examples

Bind to the bindingComplete event of jqxTagCloud.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a tag element is clicked. Event Arguments:

• label - item's label.
• value - item's value.
• url - item's url.
• visibleIndex - item's visible index.
• index - item's index.
• originalEvent - the Click event object.
• target - item's html element.

Code examples

Bind to the itemClick event of jqxTagCloud.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.on('itemClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.destroy();
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myTagCloud.findTagIndex('USA');
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myTagCloud.getHiddenTagsList();
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myTagCloud.getRenderedTags();
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myTagCloud.getTagsList();
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.hideItem(1);
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.insertAt(1,'USA');
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.removeAt(1);
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.updateAt(1,'USA');
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTagCloud, { jqx } from 'jqwidgets-react/react_jqxtagcloud.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTagCloud.showItem(1);
    }

    render() {       
        let data = [
            { countryName: "Australia", technologyRating: 35 },
            { countryName: "United States", technologyRating: 60 },
            { countryName: "Germany", technologyRating: 55 },
            { countryName: "Brasil", technologyRating: 20 },
            { countryName: "United Kingdom", technologyRating: 50 },
            { countryName: "Japan", technologyRating: 80 }
        ];
     
        let source =
        {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'countryName' },
                { name: 'technologyRating' }
            ]
        };
 
        let dataAdapter = new jqx.dataAdapter(source);    
        return (
            <JqxTagCloud ref='myTagCloud'
                width={600} source={dataAdapter} displayMember={'countryName'}
                valueMember={'technologyRating'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));