Nifty Pun Master

    juttle-react-ace

    3.1.2 • Public • Published

    React-Ace

    npm version

    Build Status

    A react component for Ace / Brace

    Install

    npm install react-ace

    Usage

    import React from 'react';
    import { render } from 'react-dom';
    import brace from 'brace';
    import AceEditor from 'react-ace';
     
    import 'brace/mode/java';
    import 'brace/theme/github';
     
    function onChange(newValue) {
      console.log('change',newValue);
    }
     
    // Render editor
    render(
      <AceEditor
        mode="java"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{$blockScrolling: true}}
      />,
      document.getElementById('example')
    );

    Looking for a way to set it up using webpack? Checkout example directory for a working example using webpack.

    Available Props

    Prop Description
    name Unique Id to be used for the editor
    mode Language for parsing and code highlighting
    theme theme to use
    height CSS value for height
    width CSS value for width
    className custom className
    fontSize pixel value for font-size
    showGutter boolean
    showPrintMargin boolean
    highlightActiveLine boolean
    readOnly boolean
    minLines Minimum number of lines to be displayed
    maxLines Maximum number of lines to be displayed
    tabSize tabSize number
    value String value you want to populate in the code highlighter
    onLoad Function onLoad
    onBeforeLoad function that trigger before editor setup
    onChange function that occurs on document change it has 1 argument value. see the example above
    onCopy function that trigger by editor copy event, and pass text as argument
    onPaste function that trigger by editor paste event, and pass text as argument
    onFocus function that trigger by editor focus event
    onBlur function that trigger by editor blur event
    editorProps Object of properties to apply directly to the Ace editor instance
    keyboardHandler String corresponding to the keybinding mode to set (such as vim)
    commands Array of new commands to add to the editor

    Modes, Themes, and Keyboard Handlers

    All modes, themes, and keyboard handlers should be required through brace directly. Browserify will grab these modes / themes / keyboard handlers through brace and will be available at run time. See the example above. This prevents bloating the compiled javascript with extra modes and themes for your application.

    Example Modes

    • javascript
    • java
    • python
    • xml
    • ruby
    • sass
    • markdown
    • mysql
    • json
    • html
    • handlebars
    • golang
    • csharp
    • coffee
    • css

    Example Themes

    • monokai
    • github
    • tomorrow
    • kuroir
    • twilight
    • xcode
    • textmate
    • solarized dark
    • solarized light
    • terminal

    Example Keyboard Handlers

    • vim
    • emacs

    Install

    npm i juttle-react-ace

    DownloadsWeekly Downloads

    4

    Version

    3.1.2

    License

    MIT

    Last publish

    Collaborators

    • davidvgalbraith