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

StorySource

@component-controls/blocks
2.11.3

Display source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.

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

Overview

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Name
Description
Default
StorySourceOwnProps (2 properties)
viewStyle

initial view mode

valuestags
-
sourceProps

source code options

SourceProps
-
BlockContainerOwnProps (6 properties)
HTMLAttributes (42 properties)
Attributes (2 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
- (1 properties)
BoxOwnProps (3 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)
StoryInputProps (1 properties)

package
imports
peer
SourceProps
useStoryusePackageuseCurrentDocumentStoryInputProps
react
^17.0.1
ReactFC
*

file
imports
"../BlockContainer/story"
StoryBlockContainerStoryBlockContainerProps
"./BaseStorySource"
BaseStorySourceViewStyle

Stories

Theme

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Theme Selector

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Custom Title

Story source

() => 'hello'

Not Collapsible

story

() => 'hello'

No Margin

() => 'hello'