@synerise/ds-code-area
TypeScript icon, indicating that this package has built-in type declarations

0.1.32 • Public • Published

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

Property Description Type Default
label label above editor ReactNode -
description description below editor ReactNode -
counter limit character count { limit: number; placement?: 'bottom' &#124; 'top'; } -
errorText error message to show below editor (also adds "error styles") ReactNode -
syntaxOptions array of available syntaxes CodeAreaSyntaxOption[] -
currentSyntax current syntax of editor value CodeAreaSyntax -
allowFullscreen renders fullscreen mode button boolean -
tooltip tooltip text displayed next to label ReactNode -
tooltipProps tooltip properties (see @synerise/ds-tooltip) TooltipExtendedProps & TooltipProps -
style custom style added to outermost div CSSProperties -
className class name to add to outermost div string -
renderFooterContent renders custom content in footer bar (CodeAreaStateProps) => ReactNode -
renderAdditionalDescription renders custom content above description (CodeAreaStateProps) => ReactNode -
onFullscreenChange triggered when fullscreen is toggled on/off (isFullscreen: boolean) => void -
onSyntaxChange triggered when user switches syntax (newSyntax: SyntaxName) => void -
texts customise displayed texts CodeAreaTexts -

CodeAreaTexts

Customisable user-facing labels

Property Description Type Default
fullscreen fullscreen button label ReactNode -
closeFullscreen close fullscreen button label ReactNode -
fullscreenTitle used in fullscreen mode if no label prop provided ReactNode -

CodeAreaSyntaxOption

At least one syntax option must be provided.

Property Description Type Default
language language of editor value CodeAreaSyntax -
label optional user-friendly display name string -

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().

Property Description Type Default
isFullscreen is fullscreen mode on or off boolean -
count current character count number -
isValid is editor value valid boolean -

Readme

Keywords

none

Package Sidebar

Install

npm i @synerise/ds-code-area

Weekly Downloads

11

Version

0.1.32

License

ISC

Unpacked Size

43.4 kB

Total Files

33

Last publish

Collaborators

  • synerise