How to use the fastdom.read function in fastdom
To help you get started, we’ve selected a few fastdom examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
zetter / react-crossword / src / javascripts / crosswords / crossword.js View on Github 
setGridHeight() {
if (!this.$gridWrapper) {
this.$gridWrapper = $(findDOMNode(this.gridWrapper));
}
if (
isBreakpoint({
max: 'tablet',
})
) {
fastdom.read(() => {
// Our grid is a square, set the height of the grid wrapper
// to the width of the grid wrapper
fastdom.write(() => {
this.$gridWrapper.css(
'height',
`${this.$gridWrapper.offset().width}px`,
);
});
this.gridHeightIsSet = true;
});
} else if (this.gridHeightIsSet) {
// Remove inline style if tablet and wider
this.$gridWrapper.attr('style', '');
}
}componentDidUpdate(prev) {
if (
isBreakpoint({
min: 'tablet',
max: 'leftCol',
})
&& (this.props.focussed
&& (!prev.focussed || prev.focussed.id !== this.props.focussed.id))
) {
fastdom.read(() => {
this.scrollIntoView(this.props.focussed);
});
}
}fastdom
Eliminates layout thrashing by batching DOM read/write operations
