Code
Component used to present a block of code in a Toolkit element

/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} />;
};
Property | Type | Description |
className | String | The Class name to apply to the component Default: rtk-code |
editor | Codemirror | |
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.Triggered when the code value is changed.
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