React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by jhoguet

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.open {
  outline: 1px solid red;
}

.secret {
  visibility: hidden;
}

.not-secret {
  visibility: visible;
}

.expandable__close { float: right; }

Babel + JSX

class Hello extends React.Component {
  render() {
  	return (
    	<form>
        <h2>I'm a Form</h2>
        <input type="text" />
        <p className={`${this.props.isOpen ? 'secret' : 'not-secret'}`}>Im secret!</p>
    	</form>
    );
  }
}

class ExpandableContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	isOpen: false,
      isLocked: false,
    };
    this.toggle = this.toggle.bind(this);
  }
  
  toggle({ isOpen, isLocked = this.state.isLocked }) {
  	// Do nothing if its locked and staying locked
  	if (this.state.isLocked && isLocked) {
    	return;
		}
    
    this.setState({ isOpen: isOpen, isLocked: isLocked });
	}
  
	render() {
  	return (
      <div
        onMouseEnter={() => this.toggle({ isOpen: true })}
        onMouseLeave={() => this.toggle({ isOpen: false })}
        onClick={() => this.toggle({ isOpen: true, isLocked: true })}
        onBlur={() => this.toggle({ isOpen: false })}
        onFocus={() => this.toggle({ isOpen: true, isLocked: true })}
      >
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
	<div>
    <InteractableContainer render={({ hasInteracted }) => (
    	<div>
    	  <Hello isOpen={isOpen} />
        {isOpen ? <h1>Hi</h1> :null}
    	</div>
        
        
    )} />

  </div>,
  document.getElementById('container')
);