{"id":7321,"date":"2019-08-17T11:28:51","date_gmt":"2019-08-17T11:28:51","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7321"},"modified":"2019-08-17T11:28:51","modified_gmt":"2019-08-17T11:28:51","slug":"code-editor-for-react","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/code-editor-for-react\/","title":{"rendered":"Code editor for React"},"content":{"rendered":"<p>This is a quick post to say, if you&#8217;re looking for a JavaScript code editor UI for your application, the <em>react-ace<\/em> editor has so far proven itself very useful.<\/p>\n<p>Install via <em>yarn add <a href=\"https:\/\/github.com\/securingsincity\/react-ace\" rel=\"noopener noreferrer\" target=\"_blank\">react-ace<\/a><\/em> and you&#8217;ll also want <em>yarn add brace<\/em> for themes, syntax colour.<\/p>\n<p>Now import the dependencies like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport AceEditor from &quot;react-ace&quot;;\r\nimport &quot;brace\/mode\/javascript&quot;;\r\nimport &quot;brace\/mode\/python&quot;;\r\nimport &quot;brace\/theme\/monokai&quot;;\r\nimport &quot;brace\/theme\/github&quot;;\r\n<\/pre>\n<p>This includes two themes, <em>monokai<\/em> and <em>GitHub<\/em> for you to try along with two language colourings, in the form of <em>javascript<\/em> and <em>python<\/em>.<\/p>\n<p>Now to use the editor, just drop the following code into your application<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n&lt;AceEditor mode=&quot;python&quot; \/\/javascript\r\n  theme=&quot;github&quot; \/\/monokai\r\n  width=&quot;100%&quot;\r\n  onChange={this.handleOnChange}\r\n  name=&quot;AceEditor&quot;\r\n  editorProps={{$blockScrolling: true}}\r\n  value={code}\r\n  fontSize={16}\r\n\/&gt;          \r\n<\/pre>\n<p>In this example we&#8217;d have an onChange handler to store the changed text in from the editor, the <em>value={code}<\/em> is the source code that is initially displayed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a quick post to say, if you&#8217;re looking for a JavaScript code editor UI for your application, the react-ace editor has so far proven itself very useful. Install via yarn add react-ace and you&#8217;ll also want yarn add brace for themes, syntax colour. Now import the dependencies like this import AceEditor from &quot;react-ace&quot;; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243,264],"tags":[],"class_list":["post-7321","post","type-post","status-publish","format-standard","hentry","category-react","category-react-ace"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7321"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7321\/revisions"}],"predecessor-version":[{"id":7357,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7321\/revisions\/7357"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}