1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: React Integration
order: 1
layout: page
---
# React Integration
The link:https://facebook.github.io/react/[React] library from Facebook easily integrates with web components.
As long as you import required polyfills and add HTML imports for the elements you are using, you can simply start adding these custom elements to your JSX markup.
ifdef::web[]
====
See also the link:https://facebook.github.io/react/docs/webcomponents.html[Web Components page] in React documentation.
====
endif::web[]
## Grid Example
[[figure.vaadin-grid.react]]
.React integration example using [vaadinelement]#vaadin-grid#
image::img/react-integration.png[]
The example consists of two React components: [classname]#UserApp# and [classname]#UserGrid#.
The [classname]#UserGrid# component wraps the [vaadinelement]#vaadin-grid# element and does all necessary initialization to display a list of random users.
As React does not support link:https://facebook.github.io/react/docs/jsx-gotchas.html#custom-html-attributes[custom attributes] on standard elements, [vaadinelement]#vaadin-grid# DOM API cannot be fully utilized in the initialization.
Fortunately, [vaadinelement]#vaadin-grid# also provides corresponding JavaScript APIs.
Selecting an item in the [classname]#UserGrid# is handled by the [classname]#UserApp# component.
The selection is handled by displaying the photo of the selected user below the [vaadinelement]#vaadin-grid#.
The code below can be run and forked as a JSFiddle at https://jsfiddle.net/pw1nLaL8/2/.
[source, javascript]
----
// Create the UserGrid class
var UserGrid = React.createClass({
render: function(){
return (
'<vaadin-grid></vaadin-grid>';
)
},
componentDidMount: function() {
var _this = this;
var vGrid = ReactDOM.findDOMNode(this);
// Let the mounted <vaadin-grid> upgrade
(function wait() {
if (vGrid.selection) {
// Assign the data source
vGrid.items = _this.items;
vGrid.size = 1000;
// Bind selection listener
vGrid.addEventListener("selected-items-changed", _this.onRowSelect);
var pictureRenderer = function(cell) {
cell.element.innerHTML = "<img style='width: 30px' src='" + cell.data + "'></img>";
};
// Define columns
vGrid.columns = [
{name: "user.picture.thumbnail", width: 100, renderer: pictureRenderer},
{name: "user.name.first"},
{name: "user.name.last"},
{name: "user.email"},
];
} else {
setTimeout(wait, 50);
}
})();
},
items: function(params, callback) {
var url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count;
getJSON(url, function(data) {
callback(data.results);
});
},
onRowSelect: function(e) {
var onUserSelect = this.props.onUserSelect;
var index = e.target.selection.selected()[0];
e.target.getItem(index, function(err, data) {
onUserSelect(err ? undefined : data.user);
});
}
});
var UserApp = React.createClass({
render: function() {
var userImage;
if (this.state.selected) {
userImage = <img className="user-image" src={this.state.selected.picture.large} ></img>;
}
return (
<div>
<UserGrid onUserSelect={this.userSelect}></UserGrid>
{userImage}
</div>
);
},
getInitialState: function() {
return {};
},
userSelect: function(user) {
this.setState({selected: user});
}
});
HTMLImports.whenReady(function(){
ReactDOM.render('<UserApp></UserApp>', document.getElementById('container'));
});
----
|
