# rmce

> React mini code editor

Latest version **2.1.2** (published 2020-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install rmce
pnpm add rmce
yarn add rmce
bun add rmce
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2020-12-11 |
| First published | 2020-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vlad Afonin |
| Maintainers | midnightcoder |
| Keywords | react, code, editor, prismjs, highlight |

## Links

- npm: https://www.npmjs.com/package/rmce
- Repository: https://github.com/mytecor/rmce
- Homepage: https://mytecor.github.io/rmce
- npm.io page: https://npm.io/package/rmce

## Dependencies (1)

- [prismjs](https://npm.io/package/prismjs.md) ^1.22.0

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 2.1.2 (latest) — 2020-12-11
- 2.1.1 — 2020-12-11
- 2.1.0 — 2020-12-10
- 2.0.5 — 2020-11-10
- 2.0.4 — 2020-11-10
- 2.0.3 — 2020-11-09
- 2.0.2 — 2020-11-09
- 2.0.1 — 2020-11-09
- 2.0.0 — 2020-11-09
- 1.2.0 — 2020-09-19
- 1.1.3 — 2020-09-17
- 1.1.2 — 2020-09-17
- 1.1.1 — 2020-09-17
- 1.1.0 — 2020-06-08
- 1.0.5 — 2020-01-19
- … 5 more at https://npm.io/package/rmce/versions

## 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('<div>test</div>')
	return <CodeEditor
		className='rmce'
		language='jsx'
		onChange={setCode}
		value={code}
		/>
}
```

#### 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
	}
```

---
_Source: https://npm.io/package/rmce · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._