https://github.com/am-77/react-coder

A lightweight syntax highlighter, code wrapper and editor for react
https://github.com/am-77/react-coder

codewrapper component editor react syntax-highlighting

Last synced: 21 days ago
JSON representation

A lightweight syntax highlighter, code wrapper and editor for react

• Host: GitHub
• URL: https://github.com/am-77/react-coder
• Owner: AM-77
• Created: 2020-05-21T15:48:51.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T06:35:41.000Z (almost 2 years ago)
• Last Synced: 2024-11-18T04:22:12.444Z (about 1 month ago)
• Topics: codewrapper, component, editor, react, syntax-highlighting
• Language: TypeScript
• Homepage: https://am-77.github.io/react-coder/
• Size: 1.95 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# react-coder

> a lightweight react code wrapper and editor component

[![NPM](https://img.shields.io/npm/v/react-coder.svg)](https://www.npmjs.com/package/react-coder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-coder)

## Install

```bash

npm install --save react-coder

```

**or**

```bash

yarn add react-coder

```

## Usage

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

```jsx

import Editor from 'react-coder';



  



```


#### 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](https://github.com/PrismJS/prism/tree/master/themes) or in [prism-themes](https://github.com/PrismJS/prism-themes)

## Contribution

Feel free to raise an [Issue](https://github.com/AM-77/react-coder/issues) or submit a [PR](https://github.com/AM-77/react-coder/pulls).

## License

MIT © [AM-77](https://github.com/AM-77/react-coder/blob/master/LICENSE)