Skip to content

Instantly share code, notes, and snippets.

@jviereck
Created March 31, 2015 18:25
Show Gist options
  • Save jviereck/fb89ac28b9e12e7e6a74 to your computer and use it in GitHub Desktop.
Save jviereck/fb89ac28b9e12e7e6a74 to your computer and use it in GitHub Desktop.
// Small example to demonstrate updating / manipulate the CSS styles using JS.
class MyZoomableContainer extends React.CSSComponent {
constructor() {
this.state = { fontSize: 14 };
}
// Increase or decrease the font size. The changes will get applied later
// when the component will rerender.
decrFontSize() { this.setState({fontSize: this.state.fontSize - 1 }); }
incrFontSize() { this.setState({fontSize: this.state.fontSize + 1 }); }
render() {
// The variable `this.state.fontSize` is used to determine the font size
// of the container element.
var styleMap = this.mountStyles`
.container {
font-size: ${this.state.fontSize}
}`;
return (
<div className={styleMap.container}>
{this.props.content}
<button onclick={this.decrFontSize()}>Zoom Out</button>
<button onclick={this.incrFontSize()}>Zoom In</button>
</div>);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment