@synerise/ds-code-area v1.1.8

id: code-area

title: CodeArea

CodeArea UI Component

Installation

npm i @synerise/ds-code-area
or
yarn add @synerise/ds-code-area

To have syntax validation you need to follow the integration instructions here: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

Usage

import CodeArea from '@synerise/ds-code-area'

type SupportedSyntaxes = 'json' | 'javascript';
const syntaxOptions = [
    {
        language: 'json',
        label: 'JSON'
    },
    {
        language: 'javascript',
        label: 'Javascript'
    }
];

<CodeArea<SupportedSyntaxes>
    syntaxOptions={syntaxOptions}
    onSyntaxChange={ /* current syntax handler */ }
    onChange={ /* current value handler */ }
/>

API

CodeAreaTexts

Customisable user-facing labels

CodeAreaSyntaxOption

At least one syntax option must be provided.

CodeAreaSyntax

See list of languages supported by monaco here: https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.

CodeAreaSyntax = 'json' | 'html' | 'css' | 'typescript' | 'javascript' | string;

CodeAreaStateProps

Props passed to renderAdditionalDescription() and renderFooterContent().