A next-generation tool to create blazing-fast documentation sites
API
created:3/12/2020
,
updated:2/17/2021

PropsTable

@component-controls/blocks
2.11.3

Displays the component's properties as well as configurable controls to interact with the component.

import { PropsTable } from '@component-controls/blocks';

Overview

Name
Description
Default
optionalArray
any[]
-
optionalArrayOf
number[]
-
optionalBool
boolean
-
optionalElement
any
-
optionalElementType
Element
-
optionalEnum
NewsPhotos
-
optionalFunc
(args: any) => any
-
optionalMessage
Message
-
optionalNode
any
-
optionalNumber
number
21
optionalObject
object
-
optionalObjectOf
{ [key: string]: number; }
-
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalString
string
-
optionalSymbol
symbol
-
optionalUnion
stringnumberMessage
-
requiredAny
any
-
requiredFunc
(prop: any) => any
-

Name
Description
Default
PropsTableOwnProps (2 properties)
extraColumns

extra custom columns passed to the PropsTable.

Column<{}>[]
-
flat

if true, will flatten the group by

boolean
-
- (3 properties)
SpaceProps (28 properties)
HTMLAttributes (42 properties)
BlockContainerOwnProps (6 properties)
Attributes (2 properties)
AriaAttributes (48 properties)
DOMAttributes (160 properties)
BoxOwnProps (3 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)
ComponentInputProps (2 properties)

package
imports
peer
StoryContextProviderControlsContextStoryProvider
react
^17.0.1
FC
*
Column
*
theme-ui
^0.6.0-alpha.7
jsx

file
imports
"../BlockContainer/components/ComponentsBlockContainer"
ComponentsBlockContainerComponentsBlockContainerProps
"../context"
useCustomProps
"./BasePropsTable"
BasePropsTable

Stories

Subcomponents

Name
Description
Default

Extra Columns

Name
Description
Default
Custom
optionalArray
any[]
-
OPTIONALARRAY
optionalArrayOf
number[]
-
OPTIONALARRAYOF
optionalBool
boolean
-
OPTIONALBOOL
optionalElement
any
-
OPTIONALELEMENT
optionalElementType
Element
-
OPTIONALELEMENTTYPE
optionalEnum
NewsPhotos
-
OPTIONALENUM
optionalFunc
(args: any) => any
-
OPTIONALFUNC
optionalMessage
Message
-
OPTIONALMESSAGE
optionalNode
any
-
OPTIONALNODE
optionalNumber
number
21
OPTIONALNUMBER
optionalObject
object
-
OPTIONALOBJECT
optionalObjectOf
{ [key: string]: number; }
-
OPTIONALOBJECTOF
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
OPTIONALOBJECTWITHSHAPE
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
OPTIONALOBJECTWITHSTRICTSHAPE
optionalString
string
-
OPTIONALSTRING
optionalSymbol
symbol
-
OPTIONALSYMBOL
optionalUnion
stringnumberMessage
-
OPTIONALUNION
requiredAny
any
-
REQUIREDANY
requiredFunc
(prop: any) => any
-
REQUIREDFUNC

Controls

Hello, my name is Mark, and I am 19 years old.

Name
Description
Default
Controls
Name

a name property

string
-
Age

age is a number property

number
-

Title

Name
Description
Default

Custom Title

Name
Description
Default

Not Collapsible

Name
Description
Default