preact-codemirror v1.0.1

preact-codemirror

Simple and lightweight CodeMirror component for Preact; for :atom_symbol: Preact

Usage

languages themes

const { h, Component, render } = require("preact");
import CodeMirror from "preact-codemirror";

// import language
import "codemirror/mode/dart/dart.js";

// import theme
import "codemirror/theme/dracula.css";

class Demo extends Component {
  state = {
    code: `
// dart-lang

void main() {

  String text = "hello world";

  print(text);

}
`
  }
  render() {
    return (
      <div>
        <CodeMirror
          code={this.state.code.trim()}
          config={{
            mode: "dart",
            theme: "dracula",
            styleActiveLine: true,
            lineNumbers: true
          }}
          instance={instance => {
            instance.on("change", () => {
              console.log(instance.getValue())
            });

          }}
        />
      </div>
    );
  }
}

render(<Demo />, document.body);

Install

$ npm install --save preact-codemirror

<script src="https://unpkg.com/preact-codemirror@1.0.0/dist/preact-codemirror.min.js"></script>

Properties

code

Type: String

config

Type: Object

instance

Type: Function

License

MIT © Ahmet Şimşek