# Markdown

## Usage

The Markdown component takes *markdown* text and converts it into *JSX*. Simply import a **.md** file into your element and pass it to the Markdown component as the **value** property:

{% tabs %}
{% tab title="Component" %}
{% code title="MyElement.js" %}

```jsx
import React from 'react';
import readme from './readme.md';
import { useHookComponent } from 'reactium-core/sdk';

const MyElement = () => {

    const { Markdown } = useHookComponent('RTK');
    
    return <Markdown value={readme} />
};
```

{% endcode %}
{% endtab %}

{% tab title="Markdown" %}
{% code title="readme.md" %}

````markup
# Title
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Some **bold**, *italic*, ~~strike~~, and `code` text

```
<div>markup</div>
```

> Block quote
````

{% endcode %}
{% endtab %}

{% tab title="Output" %}
![](https://2573846121-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4poMvugQiWii-2eM1T%2F-MSoIFcypW2PnKIwEJ4A%2F-MT1lQ-qOLyC2hMz-ge1%2Fmarkdown.png?alt=media\&token=cf3bea78-cf70-4128-a35c-fc9d8134bc49)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
The Toolkit plugin extends the Reactium Webpack configuration to allow **.md** file imports.&#x20;
{% endhint %}

## Properties

| Property  | Type     | Description       |
| --------- | -------- | ----------------- |
| **Value** | `String` | The markdown text |