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