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>
Synchronization
The component also allows you to synchronize selected tab choices by providing a groupId property:
<Image />
Basic Markdown syntax for images works out of the box (e.g. ), 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!" />
<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 />. To remove this error, either declare the component locally or remove the declaration.<Heading />. To remove this error, either declare the component locally or remove the declaration.<Heading />. To remove this error, either declare the component locally or remove the declaration.<Heading />. To remove this error, either declare the component locally or remove the declaration.<Heading />. To remove this error, either declare the component locally or remove the declaration.<Heading />. To remove this error, either declare the component locally or remove the declaration.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" />
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:
| Key | Type | Description | Default |
|---|---|---|---|
id | string | The numerical ID of the desired Tweet. | |
cards | string | When set to hidden, links in a Tweet are not expanded to photo, video, or link previews. | hidden |
conversation | string | When set to none, only the cited Tweet will be displayed even if it is in reply to another Tweet. | none |
theme | string | When set to dark, displays Tweet with light text over a dark background. | light |
width | number | The maximum width of the rendered Tweet in whole pixels. This value should be between 250 and 550 pixels. | |
align | string | Float the Tweet left, right, or center relative to its container. | |
lang | string | A supported Twitter language code. Note: doesn't change text of actual tweet. | |
dnt | string | When 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.