-
-
Save noahehall/67df27677ab8a0104f8f19c760156c21 to your computer and use it in GitHub Desktop.
JSON Formatter using ReactJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment