Documenting Others

React Showroom is not just meant for documenting components only, you can use it to create general documentations using markdown as well. For instance, the site that you're looking right now is created with React Showroom.

Adding Documentation Page

To add a page from markdown, you need to add a content item in the items configuration.

Supported Markdown Features

docs/content.mdx
# Title
I am some content.
## Section Title
Other content.
A [local link](/api/configuration) and an [external link](https://github.com/malcolm-kee/react-showroom).
### Sub-subsection
List items:
- item 1
- item 2
- item 3
Numbered items:
1. `react-showroom`
1. orange
1. durian
## Table
| Name | Popularity |
| :------------------- | :--------- |
| `storybook` | High |
| `react-styleguidist` | Medium |
| `react-showroom` | Very Low |
mdx
http://localhost:6969/

Title

I am some content.

Section Title

Other content.

A local link and an external link.

Sub-subsection

List items:

  • item 1
  • item 2
  • item 3

Numbered items:

  • react-showroom
  • orange
  • durian

Table

NamePopularity
storybookHigh
react-styleguidistMedium
react-showroomVery Low

Code Blocks Features

docs/content.mdx
# Code Blocks in Markdown
Contrary to the component examples, code blocks are static by default.
```js
const { buildShowroom } = require('react-showroom');
buildShowroom();
```
## Component Example
Make an example interative using `live` props.
```tsx live
const LiveExample = () => {
const [count, setCount] = React.useState(0);
return (
<div className="p-4 text-center">
<button
type="button"
onClick={() => setCount(count + 1)}
className="px-6 py-2 w-24 bg-pink-700 text-white shadow rounded"
>
{count}
</button>
</div>
);
};
<LiveExample />;
```
## Non Component Example
Code in `ts/js` can be run as well.
```ts live
setTimeout(() => {
console.log('Hello World!');
}, 500);
```
## HTML Support
For `html`, you can just include any HTML elements directly, including `<style>` and `<script>` tags.
```html live
<style>
.heading {
color: blue;
transition: color 500ms ease-in-out;
}
.heading:hover {
color: red;
}
@media (min-width: 500px) {
.heading {
font-size: 2rem;
}
}
</style>
<script>
import cx from 'classnames';
const heading = document.querySelector('.heading');
console.log('Heading', heading.textContent);
console.log('classnames', cx('base', ['item-1', true && 'whurt']));
</script>
<section>
<h1 class="heading">Hello World!</h1>
</section>
```
We take one step further and allow you to specific the `lang` attribute for `<script>` tags with `ts`, `tsx`, or `jsx`.
```html live
<style>
.button {
background-color: blue;
color: white;
transition: background-color 100ms ease-in-out;
}
.button-base {
padding: 8px 16px;
border-radius: 4px;
}
.button:hover {
background-color: darkblue;
}
</style>
<script lang="tsx">
import cx from 'classnames';
const Demo = () => {
const [clicked, setClicked] = React.useState(false);
return (
<button
onClick={() => setClicked(!clicked)}
className={cx('button', 'button-base')}
type="button"
>
{clicked ? 'Yes' : 'No'}
</button>
);
};
<Demo />;
</script>
```
## Unsupported Languages
Unsupported language will have syntax highlighting.
```yaml
doe: 'a deer, a female deer'
pi: 3.14159
xmas: true
calling-birds:
- huey
- dewey
- louie
- fred
```
mdx
http://localhost:6969/

Code Blocks in Markdown

Contrary to the component examples, code blocks are static by default.

const { buildShowroom } = require('react-showroom');
buildShowroom();
js

Component Example

Make an example interative using live props.

Non Component Example

Code in ts/js can be run as well.

ts

HTML Support

For html, you can just include any HTML elements directly, including <style> and <script> tags.

We take one step further and allow you to specific the lang attribute for <script> tags with ts, tsx, or jsx.

Unsupported Languages

Unsupported language will have syntax highlighting.

doe: 'a deer, a female deer'
pi: 3.14159
xmas: true
calling-birds:
- huey
- dewey
- louie
- fred
yaml