Custom Components

The docs.page project is built on-top of MDX. MDX allows custom React components to be written within the Markdown content and rendered.

docs.page provides some useful components to help address common documentation trends.

Please submit a PR or issue if you require a custom component.

<Tabs />

The Tabs component allows you to specify content which can be rendered within tabs:

<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple', value: 'apple'},
    {label: 'Orange', value: 'orange'},
    {label: 'Banana', value: 'banana'},
  ]}>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
Apple
Orange
Banana

Synchronization

The component also allows you to synchronize selected tab choices by providing a groupId property:

Apple
Orange
Banana
Apple
Orange
Banana

<Image />

Basic Markdown syntax for images works out of the box (e.g. ![alt tag](src)), however using the Image component directly allows for a bit more control on some of the properties.

Zooming

By default, images are not zoomable (unless overridden via configuration). Pass the zoom property to the component to enable image zooming:

<Image src="https://via.placeholder.com/350x150" zoom />

Captions

To add a caption to images, provide the caption property:

<Image src="https://via.placeholder.com/350x150" caption="A pretty caption!" />
A pretty caption!

<Heading />

The Heading component renders a heading tag, by proving a type property:

<Heading type="h1">Heading 1</Heading>
<Heading type="h2">Heading 2</Heading>
<Heading type="h3">Heading 3</Heading>
<Heading type="h4">Heading 4</Heading>
<Heading type="h5">Heading 5</Heading>
<Heading type="h6">Heading 6</Heading>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

In most cases, using this component is not required and raw Markdown can be used instead.

<YouTube />

The YouTube component renders an embedded YouTube video by providing a video id:

<YouTube id="dQw4w9WgXcQ" />

<Vimeo />

The Vimeo component renders an embedded Vimeo video by providing a video id:

<Vimeo video="253989945" />
Loading...

This wraps @ui-wave/react-video, and accepts lots of optional parameters which can be found in their documentation.

We also support a caption property for adding captions to your videos.

<Tweet />

The Tweet component renders an embedded Tweet by providing a tweet id:

<Tweet id="1513662173796605958" />

This component accepts the following props:

KeyTypeDescriptionDefault
idstringThe numerical ID of the desired Tweet.
cardsstringWhen set to hidden, links in a Tweet are not expanded to photo, video, or link previews.hidden
conversationstringWhen set to none, only the cited Tweet will be displayed even if it is in reply to another Tweet.none
themestringWhen set to dark, displays Tweet with light text over a dark background.light
widthnumberThe maximum width of the rendered Tweet in whole pixels. This value should be between 250 and 550 pixels.
alignstringFloat the Tweet left, right, or center relative to its container.
langstringA supported Twitter language code. Note: doesn't change text of actual tweet.
dntstringWhen true, the Tweet and its embedded page are not used for purposes that include personalized suggestions and ads.true

This component is built on top of the Twitter embedded tweet API, more information can be found here.