# Code

![](https://2573846121-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4poMvugQiWii-2eM1T%2F-MSo30s0i3McnxcV_LFz%2F-MSo4a4tQc6MZ3apWbmT%2Fcode.png?alt=media\&token=1f980f34-d60a-4329-beb9-66529a7f3246)

{% 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
```