EccUtilsDesignCode Component
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
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
Property | Required | Default | Type | Description |
---|---|---|---|---|
value | false | "" | String | The initial code content |
label | false | "Code block" | String | Label displayed above the code editor |
language | false | "json" | Language | The programming language for syntax highlighting |
disabled | false | false | Boolean | Whether 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 Name | Detail | Description |
---|---|---|
ecc-utils-change | { value: string } | Fired when the editor content changes |