Documentation
Design Package
Components
Code

EccUtilsDesignCode Component

Beta
0.1.0
<ecc-utils-design-code/>
EccUtilsDesignCode

Overview

The EccUtilsDesignCode component is a customizable code editor built using the Ace editor. It provides a user-friendly interface for displaying and editing code in various languages, with syntax highlighting and theme support.

This component uses the Ace editor. For more details, refer to the Ace editor documentation (opens in a new tab).

Preview

,

Examples

Basic Usage

EccUtilsDesignCodeExample.tsx
import React from 'react';
import EccUtilsDesignCode from '@elixir-cloud/design/dist/react/code';
 
export default function CodeEditor() {
  return <EccUtilsDesignCode 
    value="echo 'Hello, World!';"
    label="Shell Script Example"
    language="sh"
    disabled={false}
  />;
}

Properties

PropertyRequiredDefaultTypeDescription
valuefalse""StringThe initial code content
labelfalse"Code block"StringLabel displayed above the code editor
languagefalse"json"LanguageThe programming language for syntax highlighting
disabledfalsefalseBooleanWhether the editor is read-only

value

The value property sets the initial content of the code editor.

label

The label property specifies the text displayed above the code editor.

language

The language property determines the syntax highlighting. Supported values are:

  • "yaml"
  • "json"
  • "xml"
  • "makefile"
  • "sh"

While we maintain & provide support for the above languages, the Ace editor supports many more. For a full list of supported languages, refer to the Ace editor documentation (opens in a new tab).

disabled

When true, the disabled property makes the code editor read-only.

Events

Event NameDetailDescription
ecc-utils-change{ value: string }Fired when the editor content changes
Elixir Cloud & AAICloud SDKElixir

Released under Apache 2.0 License.

Copyright © 2023-2024 ELIXIR