https://github.com/mytecor/rmce

React mini code editor
https://github.com/mytecor/rmce

prismjs react

Last synced: 4 days ago
JSON representation

React mini code editor

• Host: GitHub
• URL: https://github.com/mytecor/rmce
• Owner: mytecor
• Created: 2020-01-18T23:08:12.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-11-14T19:46:49.000Z (about 3 years ago)
• Last Synced: 2024-04-25T07:22:26.220Z (8 months ago)
• Topics: prismjs, react
• Language: JavaScript
• Homepage: https://mytecor.github.io/rmce
• Size: 1.09 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# rmce

###### React mini code editor

[In action](https://mytecor.github.io/rmce)

#### Usage example (with prismjs)

```jsx

import React from 'react'

import CodeEditor from 'rmce'

// add jsx language support

import 'prismjs/components/prism-jsx'

// editor theme

import 'rmce/index.css'

function MyFancyEditor() {

	let [code, setCode] = React.useState('
test
')

	return 

}

```


#### Props

```ts

class Props {

	// Current value of the editor i.e. the code to display

	children: string = ''

	value: string = this.children

	// Callback which is called when the value of the editor changes

	onChange(): void

	// Specifies the syntax language for prismjs

	language: string | null = ''

	// Specifies the ability to edit

	readOnly: boolean = false

	// Callback which will receive code to highlight

	highlight(code: string): string {

		return language? Prism.highlight(code, Prism.languages[language]) : code

	}

```