Reactium
Search
⌃K

Code

Component used to present a block of code in a Toolkit element
The code block is parsed with Prettier before it is rendered.

Usage

/MyCodeElement.js
import React, { useEffect, useRef } from 'react';
import Reactium, { useHookComponent } from 'reactium-core/sdk';
const SomeCode = `
// Here's some code:
console.log('Hello Whomans');
`;
const MyCodeElement = () => {
// Reference placeholder
const codeRef = useRef();
// Get the Code component from Reactium.Component registry
const { Code } = useHookComponent('RTK');
// Change handler
const changed = e => {
console.log(e);
};
/*
// Listen to change event as a side-effect
useEffect(() => {
if (!codeRef.current) return;
codeRef.current.addEventListener('change', changed);
return () => {
codeRef.current.removeEventListener('change', changed);
};
}, [codeRef.current]);
*/
// Render
return <Code value={SomeCode} ref={codeRef} onChange={changed} />;
};

Properties

Property
Type
Description
className
String
The Class name to apply to the component
Default: rtk-code
editor
Codemirror
Reference to the Codemirror object.
foldGutter
Boolean
Enable folding
Default: true
lineNumbers
Boolean
Hide/show the line numbers.
Default: true
lineWrapping
Boolean
Wrap long lines of code.
Default: false
id
String
ID value used for action Zone.
Default: code
indentUnit
Number
Number of spaces used when indenting.
Default: 4
readOnly
Boolean
Disable live editing.
Default: false
value
String
The block of code to output
onChange
Function
Called when the change event is triggered.
The Code component is an implementation of Codemirror and most of the properties are passed through to the Codemirror instance. If you want more control over the Code output you can directly apply configuration to the Codemirror instance via the editor property.

Events

change

Triggered when the code value is changed.

Theme

You can theme the Code block by supplying the following scss variables before the Toolkit styles are imported:
$rtk-code-border-color
$rtk-code-gutter-bg-color
$rtk-code-linenumber-color
$rtk-code-text-color
$rtk-code-cursor
$rtk-code-quote
$rtk-code-negative
$rtk-code-keyword
$rtk-code-atom
$rtk-code-number
$rtk-code-def
$rtk-code-var-1
$rtk-code-var-2
$rtk-code-var-3
$rtk-code-comment
$rtk-code-string-1
$rtk-code-string-2
$rtk-code-operator
$rtk-code-builtin
$rtk-code-meta
$rtk-code-bracket
$rtk-code-tag
$rtk-code-attribute
$rtk-code-hr
$rtk-code-link
$rtk-code-error
$rtk-code-active
$rtk-code-fold-marker
Last modified 2yr ago