Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/react-textarea-code-editor

Package Overview
Dependencies
Maintainers
1
Versions
55
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-textarea-code-editor

A simple code editor with syntax highlighting.

  • 1.3.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
33K
increased by6.69%
Maintainers
1
Weekly downloads
 
Created
Source

React Textarea Code Editor

Build & Deploy Coverage Status Open in unpkg npm bundle size npm version

A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.

Features:

  • ☕️ Automatic syntax highlighting.
  • 🐲 Automatic indent on new lines.
  • 🩲 Indent line or selected text by pressing tab key, with customizable indentation.
  • 🌸 Wrap selected text in parens, [], (), <>, {}, "", '', "", ``

Install

$ npm i @uiw/react-textarea-code-editor

Usage

Open in CodeSandbox Open in Github gh-pages

import CodeEditor from '@uiw/react-textarea-code-editor';

function App() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Please enter JS code."
      onChange={(evn) => setCode(evn.target.value)}
      padding={15}
      style={{
        fontSize: 12,
        backgroundColor: "#f5f5f5",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

Props

interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  prefixCls?: string;
  /**
   * Set what programming language the code belongs to.
   */
  language?: string;
  /**
   * Optional padding for code. Default: `10`.
   */
  padding?: number;
  /**
   * The minimum height of the editor. Default: `16`.
   */
  minHeight?: number;
}

Demo

https://uiwjs.github.io/react-textarea-code-editor/

Development

Runs the project in development mode.

# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

production

Builds the app for production to the build folder.

npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

License

Licensed under the MIT License.

FAQs

Package last updated on 25 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc