react-coder

a lightweight react code wrapper and editor component

Install

npm install --save react-coder

or

yarn add react-coder

Usage

Import the Editor from 'react-coder' and using it.

import Editor from 'react-coder';

<div height='500px' width='80%'>
  <Editor 
    fontSize={12} 
    onCodeChange={onCodeChange} 
    language={"jsx"} 
    readOnly={true} 
    lineNumbers={true} 
    code={usage_code} 
    copy={true} />
</div>

NOTE:

The height & width of the Editor equals the height & width of the div wrapping it

Available Props:

fontSize

The size of the font, default: 13px

Options: css font-size

onCodeChange

A code change handler.

Options: onCodeChange(code: string)

language

Hightlight the code based on the selected langauge, default: 'js'

Options: check the supported languages here [supported-languages](https://prismjs.com/index.html#supported-languages)

readOnly

Edit permission. default: false

Options: true or false

lineNumbers

Display or hide the line numbers. default: false

Options: true or false

copy

Display or hide the copy to clipboard button. default: false

Options: true or false

code

The code you want to display, or edit.

Options: some code

Available themes

You can find the themes on the prism repo or in prism-themes

Contribution

Feel free to raise an Issue or submit a PR.

License

MIT © AM-77