kristopherjohnson/react-formatjson.html

## react-formatjson.html
<!doctype html>
<html lang="en">
<head>
  <title>JSON Formatter</title>

  <script src="//fb.me/react-0.12.2.min.js"></script>
  <script src="//fb.me/JSXTransformer-0.12.2.js"></script>

  <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>

  <style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }

    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }

    body {
      padding: 1em;
      line-height: 1;
      font-family: 'Source Sans Pro', sans-serif;
    }

    h1 {
      margin-bottom: .67em;
      font-size: larger;
      font-weight: bold;
    }

    textarea {
      border:      1px solid black;
      font-family: 'Source Code Pro', monospace;
      font-size:   10pt;
      width:       100%;
      height:      12em;
      display:     block;
    }

    .output-good {
      color:            green;
      background-color: white;
    }

    .output-error {
      color:            white;
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>JSON Reformatter</h1>

  <div id="formatter"></div>

  <script type="text/jsx">
    (function() {
      var Formatter = React.createClass({

        getInitialState: function() {
          return {
            inputText: '{"One":1,"Two":2,"Three":[1,2,3]}',
            indent:    '2'
          };
        },

        render: function() {
          return (
            <div>

              <textarea
                value={this.state.inputText}
                onChange={this.onInputTextChange}
                placeholder="Paste your JSON here"
                autofocus="true" />

              <button onClick={this.clearInputText}>Clear Input Text</button>

              <FormattedJSON
                inputText={this.state.inputText}
                indent={this.state.indent} />

              <div className="indentation">
                Indentation:
                <select
                  value={this.state.indent}
                  onChange={this.onIndentationChange}
                >
                  <option value="0">No spaces</option>
                  <option value="1">One space</option>
                  <option value="2">Two spaces</option>
                  <option value="3">Three spaces</option>
                  <option value="4">Four spaces</option>
                  <option value="8">Eight spaces</option>
                  <option value="TAB">Tabs</option>
                </select>
              </div>

            </div>
          );
        },

        clearInputText: function() {
          this.setState({'inputText': ''});
        },

        onInputTextChange: function(event) {
          this.setState({'inputText': event.target.value});
        },

        onIndentationChange: function(event) {
          this.setState({'indent' : event.target.value});
        }
      });

      var FormattedJSON = React.createClass({
        propTypes: function() {
          return {
            'inputText': React.PropTypes.string.isRequired,
            'indent': React.Proptypes.string.isRequired
          }
        },

        render: function() {
          var outputText, outputClass;

          try {
            var indent = this.props.indent;
            var space = (indent === 'TAB') ? '\t' : parseInt(indent);

            outputText = this.formatJSON(this.props.inputText, space);
            outputClass = 'output-good';
          }
          catch (err) {
            // JSON.parse threw an exception
            outputText = err.message;
            outputClass = 'output-error';
          }

          return (
            <textarea
              value={outputText}
              className={outputClass}
              readOnly="true"
              placeholder="Reformatted JSON will appear here" />
          );
        },

        formatJSON: function(input, space) {
          if (input.length == 0) {
            return '';
          }
          else {
            var parsedData = JSON.parse(input);
            return JSON.stringify(parsedData, null, space);
          }
        }
      });

      React.render(<Formatter />, document.getElementById('formatter'));
    })();
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>JSON Formatter</title>

	<script src="//fb.me/react-0.12.2.min.js"></script>
	<script src="//fb.me/JSXTransformer-0.12.2.js"></script>

	<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700\|Source+Code+Pro' rel='stylesheet' type='text/css'>

	<style>
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}

	body {
	padding: 1em;
	line-height: 1;
	font-family: 'Source Sans Pro', sans-serif;
	}

	h1 {
	margin-bottom: .67em;
	font-size: larger;
	font-weight: bold;
	}

	textarea {
	border: 1px solid black;
	font-family: 'Source Code Pro', monospace;
	font-size: 10pt;
	width: 100%;
	height: 12em;
	display: block;
	}

	.output-good {
	color: green;
	background-color: white;
	}

	.output-error {
	color: white;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<h1>JSON Reformatter</h1>

	<div id="formatter"></div>

	<script type="text/jsx">
	(function() {
	var Formatter = React.createClass({

	getInitialState: function() {
	return {
	inputText: '{"One":1,"Two":2,"Three":[1,2,3]}',
	indent: '2'
	};
	},

	render: function() {
	return (
	<div>

	<textarea
	value={this.state.inputText}
	onChange={this.onInputTextChange}
	placeholder="Paste your JSON here"
	autofocus="true" />

	<button onClick={this.clearInputText}>Clear Input Text</button>

	<FormattedJSON
	inputText={this.state.inputText}
	indent={this.state.indent} />

	<div className="indentation">
	Indentation:
	<select
	value={this.state.indent}
	onChange={this.onIndentationChange}
	>
	<option value="0">No spaces</option>
	<option value="1">One space</option>
	<option value="2">Two spaces</option>
	<option value="3">Three spaces</option>
	<option value="4">Four spaces</option>
	<option value="8">Eight spaces</option>
	<option value="TAB">Tabs</option>
	</select>
	</div>

	</div>
	);
	},

	clearInputText: function() {
	this.setState({'inputText': ''});
	},

	onInputTextChange: function(event) {
	this.setState({'inputText': event.target.value});
	},

	onIndentationChange: function(event) {
	this.setState({'indent' : event.target.value});
	}
	});

	var FormattedJSON = React.createClass({
	propTypes: function() {
	return {
	'inputText': React.PropTypes.string.isRequired,
	'indent': React.Proptypes.string.isRequired
	}
	},

	render: function() {
	var outputText, outputClass;

	try {
	var indent = this.props.indent;
	var space = (indent === 'TAB') ? '\t' : parseInt(indent);

	outputText = this.formatJSON(this.props.inputText, space);
	outputClass = 'output-good';
	}
	catch (err) {
	// JSON.parse threw an exception
	outputText = err.message;
	outputClass = 'output-error';
	}

	return (
	<textarea
	value={outputText}
	className={outputClass}
	readOnly="true"
	placeholder="Reformatted JSON will appear here" />
	);
	},

	formatJSON: function(input, space) {
	if (input.length == 0) {
	return '';
	}
	else {
	var parsedData = JSON.parse(input);
	return JSON.stringify(parsedData, null, space);
	}
	}
	});

	React.render(<Formatter />, document.getElementById('formatter'));
	})();
	</script>
	</body>
	</html>