A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
loc
51
comments
22%
passed
14
coverage
75%

PropsTable

avatar of atanasster
@component-controls/blocks
3.15.0

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

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

Not Collapsible

Name
Description
Default
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)

Commits

Date
Author
Commit Message
5/18/2021

atanasster

avatar of atanasster
chore: bump dependencies
12/8/2020

atanasster

avatar of atanasster
feat: addon-stats
9/7/2020

atanasster

avatar of atanasster
feat: docz migration compatibility
8/8/2020

atanasster

avatar of atanasster
feat: props and controls table visibility
8/1/2020

atanasster

avatar of atanasster
fix: notify stories on changes non-current
7/25/2020

atanasster

avatar of atanasster
chore: remove react context api
7/10/2020

atanasster

avatar of atanasster
feat: data-testids
6/30/2020

atanasster

avatar of atanasster
docs: writing mdx stories docs
5/10/2020

atanasster

avatar of atanasster
feat: props table selectively display props, controls or both
5/8/2020

atanasster

avatar of atanasster
feat: copy table added to props table
27 commits
package
imports
peer
Column
StoryContextProviderControlsContextStoryProvider
react
^17.0.1
FC
*
theme-ui
^0.8.4
jsx
file
imports
"../BlockContainer/components/ComponentsBlockContainer"
ComponentsBlockContainerComponentsBlockContainerProps
"../context"
useCustomProps
"./BasePropsTable"
BasePropsTable

Stories

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
-

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