Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exploring how we can integrate LESS directly into React.js components
var Navbar = React.createClass({
getInitialState() {
return {
view: 'fullscreen',
top: 100,
left: 0
};
}
render() {
var styles = (
<style>
Navbar {
translate3d({{left}}px, {{top}}px, 0);
background: #000;
color: #fff;
width: 75%;
&[view=fullscreen] {
width: 100%;
}
&[view=minimal] {
width: 50%;
}
// Alternatively
width: {{this.state.view == 'fullscreen' ? '100%' : '50%'}};
container {
border: 1px solid yellow;
}
}
</style>
);
styles = parseStyle(styles, this); // Parse the React Stylesheet
return (
<div role="navigation" style={{styles.Navbar}}>
<div style={{styles.Navbar.container}}>
<Link to="/" style={{styles.Navbar.brand}}>
<img src="/images/logo-small.png" width="38" height="38" alt="React" />
<span>{{this.state.view == 'fullscreen' ? 'Fullscreen view' : 'Custom view'}}</span>
</Link>
</div>
</div>
);
}
changeView(type) {
this.setState({view: type}); // minimal, fullscreen, etc.
}
});
@vjeux

This comment has been minimized.

Copy link

vjeux commented Feb 2, 2015

var Navbar = React.createClass({

  getInitialState() {
    return {
      view: 'fullscreen',
      top: 100,
      left: 0
    };
  }

  render() {
    var navStyle = [
      styles.navBar,
      {translate3d: `(${this.state.left}px, ${this.state.top}px, 0)`},
      this.state.view === 'fullscreen' && styles.fullscreen,
      this.state.view === 'minimal' && styles.minimal,
    ];

    return (
      <div role="navigation" style={navStyle}>
        <div style={styles.container}>
          <Link to="/" style={styles.brand}}>
            <img src="/images/logo-small.png" width="38" height="38" alt="React" />
            <span>{{this.state.view == 'fullscreen' ? 'Fullscreen view' : 'Custom view'}}</span>
          </Link>
        </div>
      </div>
    );
  }

  changeView(type) {
    this.setState({view: type}); // minimal, fullscreen, etc.
  }

});

var styles = {
  navBar: {
    background: '#000',
    color: '#fff',
    width: '75%',
  },
  fullScreen: {
    width: '100%',
  },
  minimal: {
    width: '50%',
  },
  container: {
    border: '1px solid yellow',
  },
  brand: {
    // ...
  },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.