Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <div id="app"></div>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
​
</body>
</html>
 
button {
  padding: 20px;
  border-radius: 10px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: none;
  width: 100px;
  float: left;
  clear: both;
}
​
svg {
  float: left;
}
​
.true {
  background-color: green;
}
​
.false {
  background-color: red;
}
 
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: false};
​
    this.handleClick = this.handleClick.bind(this);
  }
​
  handleClick() {
    this.setState({
      isToggleOn: !this.state.isToggleOn
    });
  }
​
  render() {
    return (
      <div>
        <ComputerSvg isScreenOn={this.state.isToggleOn} />
        <button onClick={this.handleClick} className={this.state.isToggleOn}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
      </div>
    );
  }
}
​
// Stateless Functional Component
const ComputerSvg = (props) => {
  const { isScreenOn } = props;
  const fillColor = isScreenOn ? "blue" : "#fff";
​
  return (
    <svg>
      <g xmlns="http://www.w3.org/2000/svg">
        <path fill="#000000" d="M103.9,74.9c-3.1,0-5.6-2.5-5.6-5.6s2.5-5.6,5.6-5.6c3.1,0,5.6,2.5,5.6,5.6S107,74.9,103.9,74.9z    M103.9,65.6c-2,0-3.7,1.6-3.7,3.7c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7C107.6,67.2,105.9,65.6,103.9,65.6z"/>
        <rect x="11" y="39" fill={fillColor} width="56" height="40"/>
        <rect x="88.8" y="93.7" fill="#000000" width="2" height="6.1"/>
        <rect x="94.4" y="93.7" fill="#000000" width="2" height="6.1"/>
        <rect x="100.1" y="93.7" fill="#000000" width="2" height="6.1"/>
        <rect x="105.8" y="93.7" fill="#000000" width="2" height="6.1"/>
        <rect x="111.4" y="93.7" fill="#000000" width="2" height="6.1"/>
        <rect x="117.1" y="93.7" fill="#000000" width="2" height="6.1"/>
        <path fill="#000000" d="M77.3,89.8H0.5V28.2h76.8V89.8z M4.5,85.8h68.9V32.2H4.5V85.8z"/>
        <path fill="#000000" d="M52.2,97.4H25.6V85.8h26.6V97.4z M29.6,93.4h18.7v-3.6H29.6V93.4z"/>
        <path fill="#000000" d="M61.5,104.4H16.3l2.3-11h40.6L61.5,104.4z M21.2,100.4h35.5l-0.6-3H21.8L21.2,100.4z"/>
        <path fill="#000000" d="M68.4,80.9H9.4V37.2h58.9V80.9z M11.4,78.9h55V39.2h-55V78.9z"/>
        <path fill="#000000" d="M127.5,107.9H80.3V20.1h47.2V107.9z M84.3,103.9h39.2V24.1H84.3V103.9z"/>
        <path fill="#000000" d="M118.6,39.1H89.3V29.1h29.3V39.1z M91.3,37.2h25.3v-6.1H91.3V37.2z"/>
        <path fill="#000000" d="M118.6,39.1H89.3V29.1h29.3V39.1z M91.3,37.2h25.3v-6.1H91.3V37.2z"/>
        <path fill="#000000" d="M118.6,52.8H89.3V42.7h29.3V52.8z M91.3,50.8h25.3v-6.1H91.3V50.8z"/>
      </g>
    </svg>
  );
}
​
ReactDOM.render(
  <Toggle />,
  document.getElementById('app')
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mateoclarkepro
0viewers