# Code

![](/files/-MSo4a4tQc6MZ3apWbmT)

{% hint style="success" %}
The code block is parsed with [Prettier](https://prettier.io/) before it is rendered.
{% endhint %}

## Usage

{% code title="/MyCodeElement.js" %}

```jsx
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} />;
};
```

{% endcode %}

## Properties

| Property         | Type         | Description                                                                                           |
| ---------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
| **className**    | `String`     | <p>The Class name to apply to the component</p><p><strong><code>Default: rtk-code</code></strong></p> |
| **editor**       | `Codemirror` | Reference to the [Codemirror](https://codemirror.net/) object.                                        |
| **foldGutter**   | `Boolean`    | <p>Enable folding</p><p><strong><code>Default: true</code></strong></p>                               |
| **lineNumbers**  | `Boolean`    | <p>Hide/show the line numbers. </p><p><strong><code>Default: true</code></strong></p>                 |
| **lineWrapping** | `Boolean`    | <p>Wrap long lines of code. </p><p><strong><code>Default: false</code></strong></p>                   |
| **id**           | `String`     | <p>ID value used for action Zone.</p><p><strong><code>Default: code</code></strong></p>               |
| **indentUnit**   | `Number`     | <p>Number of spaces used when indenting. </p><p><strong><code>Default: 4</code></strong></p>          |
| **readOnly**     | `Boolean`    | <p>Disable live editing. </p><p><strong><code>Default: false</code></strong></p>                      |
| **value**        | `String`     | The block of code to output                                                                           |
| **onChange**     | `Function`   | Called when the change event is triggered.                                                            |

{% hint style="info" %}
The Code component is an implementation of [Codemirror](https://codemirror.net/) and most of the properties are passed through to the [Codemirror](https://codemirror.net/) instance. If you want more control over the Code output you can directly apply configuration to the Codemirror instance via the `editor` property.
{% endhint %}

## Events

### change

Triggered when the code value is changed.&#x20;

## 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
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactium.io/reactium-toolkit/components/code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.