Neverending Plethora of Modules

    @evansolomon/react-ace

    2.0.4 • Public • Published

    #React-Ace

    A react component for Ace / Brace

    ##Install

    npm install react-ace

    ##Usage

    var React = require('react');
    var brace  = require('brace');
    var AceEditor  = require('react-ace');
    
    require('brace/mode/java')
    require('brace/theme/github')
    
    function onChange(newValue) {
      console.log('change',newValue)
    }
    
    // render a first
    React.render(
      <AceEditor
        mode="java"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
      />,
      document.getElementById('example')
    );
    

    Looking for a way to set it up using webpack? Checkout this example :

    React-Ace Webpack Example 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
    fontSize pixel value for font-size
    showGutter boolean
    showPrintMargin boolean
    highlightActiveLine boolean
    readOnly boolean
    maxLines Maximum number of lines to be displayed
    value String value you want to populate in the code highlighter
    onLoad Function onLoad
    onChange function that occurs on document change it has 1 argument value. see the example above

    Modes and Themes

    All modes and themes should be required through brace directly. Browserify will grab these modes / themes 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

    Install

    npm i @evansolomon/react-ace

    DownloadsWeekly Downloads

    4

    Version

    2.0.4

    License

    MIT

    Last publish

    Collaborators

    • evansolomon