https://github.com/hamlim/react-code-editor
A lightweight react code editor component with a few highlights
https://github.com/hamlim/react-code-editor
code-editor editor react react-hooks
Last synced: 10 months ago
JSON representation
A lightweight react code editor component with a few highlights
- Host: GitHub
- URL: https://github.com/hamlim/react-code-editor
- Owner: hamlim
- Created: 2019-02-17T21:14:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-06-03T21:50:11.000Z (about 1 year ago)
- Last Synced: 2025-09-01T21:54:30.337Z (10 months ago)
- Topics: code-editor, editor, react, react-hooks
- Language: JavaScript
- Homepage:
- Size: 2.86 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Code Editor
This repo has been migrated to my Projects monorepo here: https://github.com/hamlim/projects/tree/master/packages/react-code-editor.
`@matthamlin/react-code-editor` is an opinionated package built on top of React Hooks and react-simple-code-editor.
It implements a lightweight code editor component that supports the following enhancements:
- Line commenting via `Cmd + /` or `Ctrl + /`
- Format on Save via `Cmd + s` or `Ctrl + s`
- maybe more soon???
## Usage
```jsx
import React from 'react'
import Editor from '@matthamlin/react-code-editor'
import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import prettier from 'prettier/standalone'
import babelPlugin from 'prettier/parser-babylon'
const code = `import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
Hello world
);
}
ReactDOM.render(, document.getElementById("root"));`
function App() {
return (
highlight(code, languages.jsx)}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
fontSize: 12,
}}
formatOnSave
formatCode={code =>
prettier.format(code, { parser: 'babel', plugins: [babelPlugin] })
}
/>
)
}
```