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

Title

I am some content.

Section Title

Sub-subsection

List items:

item 1
item 2
item 3

Numbered items:

react-showroom
orange
durian

Table

Name	Popularity
`storybook`	High
`react-styleguidist`	Medium
`react-showroom`	Very 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 (

<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>

import cx from 'classnames';

const heading = document.querySelector('.heading');

console.log('Heading', heading.textContent);

console.log('classnames', cx('base', ['item-1', true && 'whurt']));

</script>

<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>

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/

In this page

Component Example
Non Component Example
HTML Support
Unsupported Languages

Code Blocks in Markdown

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

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

buildShowroom();

Component Example

Make an example interative using live props.

Non Component Example

Code in ts/js can be run as well.

setTimeout(() => {
  console.log('Hello World!');
}, 500);

setTimeout(() => {
  console.log('Hello World!');
}, 500);

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

Documenting Others

Adding Documentation Page​

Supported Markdown Features​

Title

Section Title​

Sub-subsection​

Table​

Code Blocks Features​