Props Table

With the Props Table, you can display a table of component props.

Example

This is how it looks:

Name	Type	Default	Description
`text`	`string`	–	The text that's being displayed
`size?`	`'small' \| 'large' \| 'extralarge'`	`'large'`	Size of the component

Usage

Manually Defined Props

MDX

import { PropsTable } from '@republik/docs'
 
<PropsTable
  props={[
    {
      name: 'someProp',
      type: 'string',
      required: true,
      defaultValue: 'one',
      description: 'Some prop',
    },
    {
      name: 'anotherProp',
      type: 'boolean',
      required: false,
      defaultValue: 'false',
      description: 'Another prop',
    },
  ]}
/>

Generated Props

When you append ?props to an import of a TSX file which exports React components, its props are automatically extracted in the format that PropsTable expects.

MDX

import componentProps from 'components/my-component.tsx?props'
 
import { PropsTable } from '@republik/docs'
 
<PropsTable props={componentProps.MyComponent} />

⚠️

You can't use the identifier props when importing, as it will be overwritten by nextra. I.e. this won't work:

// This won't work:
import props from 'components/my-component.tsx?props'
 
// This will work:
import myProps from 'components/my-component.tsx?props'

Component Demo