Code Component

Simple code editor to handle YAML, JSON and multiline text input.

Preview

Imports

import EccUtilDesignCode from '@elixir-cloud/design/dist/react/code/index';

Example

EccUtilsDesignCode

import React from 'react';
import EccUtilDesignCode from '@elixir-cloud/design/dist/react/code/index';
 
export default function Code() {
  return <EccUtilDesignCode />
}

Properties

Property	Required	Default	Type	Description
`code`	`false`		`String`	Specifies the code to be rendered in the editor during initialization.
`label`	`Code`		`String`	Label for code editor input field.
`language`	`false`		`String`	Specifies the language interpreter for syntax highlighting.
`indentation`	`false`	`2`	`Number`	Specifies number of spaces that should be considered for 1 Tab space.
`blurDelay`	`false`	`150`	`Number`	Time in ms between 2 Tab key presses that should move the focus.
`required`	`false`	`true`	`Boolean`	Makes the code area a required field.
`disabled`	`false`	`false`	`Boolean`	Disables the code area.

Events

Event Name	React Event Name	Description
`ecc-utils-change`	`EccUtilsChangeEvent`	This event is triggered when there is a change in the code within the editor. The event details include the language set by the package author, the code as value, and an error attribute indicating whether the entered code is valid based on the specified language.

Methods

Method Name	Arguments	Description
`getCode()`		Returns the input.

Slots

👷‍♀️

Come back soon, huh!

Parts

👩‍🏭

Hold on! We are working here.

Examples

JSON

Control the language, the first tag shows the language the app-author defaulted for this component, so this means users are supposed to input JSON (in this case), but if they put something else the first badge will turn red.

😎

Try, putting valid YAML!

codeWithJson

import React from 'react';
export default function CodeWithJson() {
  return <EccUtilsDesignCode language='JSON' />;
}

Indentation

This has a default indentation of 8 spaces.

codeWithIndents

import React from 'react';
export default function CodeWithIndents() {
  return <EccUtilsDesignCode indentation={8} />;
}

Installation Collection