skip to main content
skip to navigation sidebar
skip to context sidebar
Collection of theme-ui and external components.
Theme UI
Edit this page
created:3/15/2021
updated:3/15/2021
source lines:18
comments %:67

Markdown

@component-controls/components
3.4.5

Markdown display component to compile and display markdown at run-time. Uses markdown-to-jsx internally.

Component

browse
docs
issues
import { Markdown } from '@component-controls/components';

Overview

Header H1

Header H2

Header H3

Header H4

Header H5

some text 

@theme-ui

browse
docs
issues
() => (
  <ThemeProvider>
    <Markdown>{`
# Header H1
## Header H2
### Header H3
#### Header H4
##### Header H5
some text 
\`@theme-ui\`    
`}</Markdown>
  </ThemeProvider>
)

Properties

Name
Description
Default
children

the markdown source code is passed as a children pro.

string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)
-
components

components to customize the markdown display.

any
-

External dependencies

package
imports
peer
markdown-to-jsx
^6.11.0
MarkdownToJSXMarkdownOptions
react
^17.0.1
FC
*
theme-ui
^0.6.0-alpha.7
jsx

Internal dependencies

file
imports
"./MarkdownComponents"
markdownComponents

Component JSX

Stories

Image

integrated in storybook

browse
docs
issues
() => (
  <ThemeProvider>
    <Markdown>
      ![integrated in
      storybook](https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/images/component-controls.gif)
    </Markdown>
  </ThemeProvider>
)
Previous
component-controls/LinkHeading
Next
component-controls/Multiselect