{
"hello": "world!",
"arr": [
"alpha",
"beta",
"gamma"
]
}src/components/Code/index.jsx
Render children as syntax-highlighted monospace code.
| Prop name | Type | Default | Description |
|---|---|---|---|
children | string | Required | The content to render as highlighted syntax. |
className | string | null | The CSS class name of the wrapper element |
language | custom | A highlight.js language identifier. |
src/components/CodeEditor/index.jsx
Render an editor.
Note: material-ui is a peer-dependency
| Prop name | Type | Default | Description |
|---|---|---|---|
value | string | Required | The value of the editor. |
className | string | null | The CSS class name of the wrapper element |
onChange | func | null | Callback function fired when the editor is changed. |
options | object | null | Code mirror options |
1
{2
"hello": "world!",3
"arr": [4
"alpha",5
"beta",6
"gamma"7
]8
}src/components/ErrorPanel/index.jsx
Render an error in a panel. Will be expandable display stack traces when in development
Note: material-ui is a peer-dependency
| Prop name | Type | Default | Description |
|---|---|---|---|
error | union | Required | Error to display One of type: string, Error |
className | string | null | The CSS class name of the wrapper element |
disableStackTrace | bool | true | If false, the error will show its stack trace in addition to the error message. For security purposes, it is recommended to disable stack traces in production. |
onClose | func | null | Execute a function to make the panel controlled-closeable. |
warning | bool | false | Render the panel with a warning palette instead of the harsher error palette. |
String message:
Something bad happened
Exception, in development:
Something bad happened
StateHolder.render
Error with markdown:
Markdown is also supported.
Warning styling:
Something bad happened
Warning with markdown:
Markdown is also supported.
src/components/Label/index.jsx
A label color-coded based on a given status.
Note: material-ui is a peer-dependency
| Prop name | Type | Default | Description |
|---|---|---|---|
children | node | Required | Content to render within the label. |
status | enum | Required | An intent-driven color indicator. One of: error, success, warning, default, info |
className | string | null | The CSS class name of the wrapper element |
mini | bool | false | Show label using dense styling. |
Standard sizes:
Mini:
src/components/Markdown/index.jsx
Render children as syntax-highlighted monospace code.
Note: material-ui is a peer-dependency
| Prop name | Type | Default | Description |
|---|---|---|---|
children | string | Required | The content to render as Markdown. |
Hello world!
How are you?
Here's some inline-code.
- Here's a
- nice list
- of things to do
src/components/MarkdownTextArea/index.jsx
An input text field with a markdown preview feature.
Note: material-ui is a peer-dependency
| Prop name | Type | Default | Description |
|---|---|---|---|
defaultTabIndex | number | 0 | An index number used to control which tab is selected as default. |
markdownProps | object | null | Properties applied to the Markdown component. |
onChange | func | null | A function to handle changes to the markdown text. Required for a controlled component. |
placeholder | string | null | A placeholder value used for the markdown text. |
rows | number | 5 | A number used to control the amount of rows displayed for the input area. |
value | string | undefined | The input value for the markdown text. Required for a controlled component. |
src/components/Spinner/index.jsx
Render an indeterminate spinning indicator.
Note: material-ui is a peer-dependency
| Prop name | Type | Default | Description |
|---|---|---|---|
className | string | null | The CSS class name of the wrapper element |
color | enum | primary | The color of the component. It supports those theme colors that make sense for this component. One of: primary, secondary, inherit |
loading | bool | false | Set to |
Default inline spinner:
Block-centered "loading" spinner: