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

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

Introduction Collection