Reactive Base 64

Starting point for creating JSFiddles with React. This uses React with Addons.

by Bret Lowrey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/2.3.0/superagent.min.js"></script>
<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>
<script src="https://rawgit.com/arqex/react-json-table/master/build/react-json-table.min.js"></script>
<div class="component" id="textInput"></div>
<div class="component" id="textOutput"></div>

CSS

.textOutput {
  height: 100%;
  width: 100%
}

.textInput {
  height: 100%;
  width: 100%
}

textarea { font-size: 14px; }

select {
  width: 120px; 
}

label {
  font-size: 12px;
}

.header {
  font-weight: bold;
}

html {
  height: 80%;
}

.content {
  height: 100%;
  margin: 5px;
}

.component {
  height: 100%;
  width: 48%;
  display:inline-block;
}

body {
  height: 100%;
  /*
  margin: 40px auto;
  max-width: 752px;
  */
  background: #eee;
  line-height: 1.6;
  font-size: 18px;
  color: #444;
  padding: 0 10px
}

Babel + JSX

let handleChange = () => {};
class TextareaInput extends React.Component {	
	constructor() {
  	super();
    this.state = { 
      value: ``,
      select: 'encode'
    };
  }

  componentWillUpdate(nextProps, nextState){    
    let text;
    try { 
      if(nextState.select === 'encode') {
        text = btoa(nextState.value);
      } else {
        text = atob(nextState.value);
      }
    } catch(e) {
      text = String(e);
    };
    handleChange(text);
  }
  
  handleText(evt) {
    this.setState({value: evt.target.value});
  }
  
  handleSelect(evt) {
    this.setState({select: evt.target.value});
  }
  
  render() {
    return (
      <div className="content">
        <div className="header">Data</div>
        <textarea value={this.state.value}
          onChange={this.handleText.bind(this)}
          className='textInput'>
        </textarea>
        <label htmlFor="outputType">Operation: </label>
        <select onChange={this.handleSelect.bind(this)}
          name="outputType">
          <option value="encode">Encode</option>
          <option value="decode">Decode</option>
        </select>  
      </div>
    );
  }
}

ReactDOM.render(
   <TextareaInput className='textInput' />,
  document.getElementById('textInput')
);

class TextareaOutput extends React.Component {	
	constructor () {
  	super();
    this.state = { value: '' };
  }

  componentDidMount() {  
    handleChange = text => {
      this.setState({value: text});
    };
  }

  render() {
    return (
      <div className="content">
        <div className="header">Output</div>
        <textarea value={this.state.value}
          className="textOutput">
        </textarea>
        <div>&nbsp;</div>
      </div>
    );
  }
}

ReactDOM.render(
   <TextareaInput className='textInput' />,
  document.getElementById('textInput')
);

ReactDOM.render(
   <TextareaOutput className='textOutput' />,
  document.getElementById('textOutput')
);
document.querySelector('.textInput').value = `Unencoded...