Markdown#

Install#

yarn add bumbag-addon-markdown
// or npm
npm install bumbag-addon-markdown

Import#

import { Markdown } from 'bumbag-addon-markdown'

Usage#

A friendly, themeable, accessible React UI Kit built with Reakit.

This is a blockquote.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is bold text

This is italic text

This is bold italic text

Get
Around
This
List

What
About
An
Ordered
One?

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

It also supports links

And images:

Editable example

<Markdown
  wrap={children => <Stack spacing="major-2">{children}</Stack>}
  content={`
A _friendly_, _themeable_, _accessible_ **React UI Kit** built with [Reakit](https://reakit.io).
\n\n
> This is a blockquote.
\n\n
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
\n\n
**This is bold text**\n
_This is italic text_\n
_**This is bold italic text**_\n
\n\n
- Get
- Around
- This
- List
\n\n
1. What
1. About
1. An
1. Ordered
1. One?
\n\n
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
\n\n\n\n
It also supports [links](https://google.com)
\n\n
And images:\n
![Bumbag](https://raw.githubusercontent.com/bumbagui/bumbag/master/logo.png)
`}
/>

<Markdown
  wrap={children => <Stack spacing="major-2">{children}</Stack>}
  content={`
A _friendly_, _themeable_, _accessible_ **React UI Kit** built with [Reakit](https://reakit.io).
\n\n
> This is a blockquote.
\n\n
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
\n\n
**This is bold text**\n
_This is italic text_\n
_**This is bold italic text**_\n
\n\n
- Get
- Around
- This
- List
\n\n
1. What
1. About
1. An
1. Ordered
1. One?
\n\n
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
\n\n\n\n
It also supports [links](https://google.com)
\n\n
And images:\n
![Bumbag](https://raw.githubusercontent.com/bumbagui/bumbag/master/logo.png)
`}
/>

Markdown Props#

content string Required

elementProps any

wrap (children: any) => any

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

On this page