open-index/open-npm huggingface dataset:
npm package: @mybricks/expression
Description: expression
Latest version: 1.0.0

# @mybricks/expression

[![NPM version](https://img.shields.io/npm/v/@mybricks/expression.svg?style=flat)](https://npmjs.com/package/@mybricks/expression)
[![NPM downloads](http://img.shields.io/npm/dm/@mybricks/expression.svg?style=flat)](https://npmjs.com/package/@mybricks/expression)

a code editor based on codemirror which can parse and evaluate expression.

## Install

```bash
$ npm install @mybricks/expression
```

## Usage

```tsx
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom/client";
import { CodeEditor, CodeEditorConfig } from "@mybricks/expression";
import styles from "./index.less";

const App = () => {
  const [value, setValue] = useState<string>("");
  const editorRef = useRef();
  const [completions, setCompletions] = useState([
    {
      label: "inputValue",
      detail: "input value",
      docs: "输入内容",
      properties: [
        {
          label: "a",
          detail: "A",
        },
      ],
    },
    {
      label: "@unction",
      docs: "demo",
    },
  ]);

  const onChange = (value) => {
    setValue(value);
  };

  const onClick = () => {
    const text = "insert a text";
    editorRef.current.insertDoc(text); //insert doc to position of cursor
    editorRef.current.getDoc(); //get doc
  };

  return (
    <div>
      <CodeEditor
        ref={editorRef}
        className={styles.wrap}
        value={value}
        completions={completions}
        onChange={onChange}
      />
      <button type="button" onClick={onClick}>
        insert
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root") as Element);
root.render(<App />);
```

## Options

| options     | type                    | default |
| ----------- | ----------------------- | ------- |
| value       | string                  | -       |
| placeholder | string                  | -       |
| onChange    | (value: string) => void | -       |
| options     | Object                  | -       |

## LICENSE

MIT