React JS Toggling Classes

In this example below you will see how to do a React JS Toggling Classes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by IanHazelton, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright IanHazelton ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>React JS Toggling Classes</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="Root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/IanHazelton/react-js-toggling-classes-RKwzGg */
.button {
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: .5rem;
  color: #fff;
  cursor: pointer;
  font-weight: 100;
  left: 0;
  letter-spacing: 1px;
  margin: .5rem;
  min-width: 10rem;
  padding: .5rem 1rem;
  position: absolute;
  text-transform: uppercase;
  transition: background-color 300ms ease;
  text-align: center;
  top: 0;
  z-index: 3;
}
.button:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.canvass {
  background: url("http://ianhazelton.com/codepen_assets/_bnwMountains.jpg") no-repeat;
  background-size: cover;
  height: 100vh;
  top: 0;
  transition: all 500ms ease;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 1;
}

.canvassAlt {
  background: url("http://ianhazelton.com/codepen_assets/_purpleMountains.jpg") no-repeat;
  background-size: cover;
  height: 100vh;
  top: 0;
  transition: all 500ms ease;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 2;
}


/*Downloaded from https://www.codeseek.co/IanHazelton/react-js-toggling-classes-RKwzGg */
var App = React.createClass({
  displayName: "App",


  getInitialState: function getInitialState() {
    return {
      condition: false
    };
  },

  handleClick: function handleClick() {
    this.setState({
      condition: !this.state.condition
    });
  },

  render: function render() {
    return React.createElement(
      "div",
      { className: "wrap" },
      React.createElement("div", { className: "canvass" }),
      React.createElement("div", { className: this.state.condition ? "" : "canvassAlt" }),
      React.createElement(
        "div",
        { className: "button", onClick: this.handleClick },
        this.state.condition ? 'colour' : 'Black and white'
      )
    );
  }
});

ReactDOM.render(React.createElement(App, null), document.getElementById('Root'));

Comments