• Version 6.5.16
  • Published
  • 352 kB
  • 28 dependencies
  • MIT license


npm i @storybook/addon-docs
yarn add @storybook/addon-docs
pnpm add @storybook/addon-docs


Document component usage and properties in Markdown



variable AddContext

const AddContext: FC<DocsContextProps>;

    variable Anchor

    const Anchor: FC<AnchorProps>;

      variable AnchorMdx

      const AnchorMdx: FC<AnchorMdxProps>;

        variable ArgsTable

        const ArgsTable: FC<ArgsTableProps>;

          variable Canvas

          const Canvas: FC<any>;

            variable CodeOrSourceMdx

            const CodeOrSourceMdx: FC<CodeOrSourceMdxProps>;

              variable ComponentsTable

              const ComponentsTable: FC<ComponentsProps>;

                variable CURRENT_SELECTION

                const CURRENT_SELECTION: string;

                  variable Description

                  const Description: FunctionComponent<DescriptionProps>;

                    variable DocsContainer

                    const DocsContainer: FunctionComponent<DocsContainerProps<AnyFramework>>;

                      variable DocsContext

                      const DocsContext: Context<DocsContextProps<AnyFramework>>;

                        variable DocsPage

                        const DocsPage: FC;

                          variable DocsStory

                          const DocsStory: FunctionComponent<DocsStoryProps>;

                            variable HeaderMdx

                            const HeaderMdx: FC<HeaderMdxProps>;

                              variable HeadersMdx

                              const HeadersMdx: {};

                                variable Heading

                                const Heading: FunctionComponent<HeadingProps>;

                                  variable Meta

                                  const Meta: FC<BaseAnnotations>;
                                  • This component is used to declare component metadata in docs and gets transformed into a default export underneath the hood.

                                  variable Primary

                                  const Primary: FC<PrimaryProps>;

                                    variable PRIMARY_STORY

                                    const PRIMARY_STORY: string;

                                      variable Source

                                      const Source: FC<ComponentProps<any>>;
                                      • Story source doc block renders source code if provided, or the source for a story if storyId is provided, or the source for the current story if nothing is provided.

                                      variable SourceContainer

                                      const SourceContainer: FC<{}>;

                                        variable SourceContext

                                        const SourceContext: Context<SourceContextProps>;

                                          variable Stories

                                          const Stories: FunctionComponent<StoriesProps>;

                                            variable Story

                                            const Story: FunctionComponent<any>;

                                              variable StoryTable

                                              const StoryTable: FC<
                                              BaseProps & { story: string; showComponent?: boolean } & {
                                              component: Component;
                                              subcomponents: Record<string, Component>;

                                                variable Subheading

                                                const Subheading: FunctionComponent<HeadingProps>;

                                                  variable Subtitle

                                                  const Subtitle: FunctionComponent<SubtitleProps>;

                                                    variable Title

                                                    const Title: FunctionComponent<TitleProps>;

                                                      variable Wrapper

                                                      const Wrapper: FunctionComponent;


                                                        function anchorBlockIdFromId

                                                        anchorBlockIdFromId: (storyId: string) => string;

                                                          function assertIsFn

                                                          assertIsFn: (val: any) => any;

                                                            function extractComponentArgTypes

                                                            extractComponentArgTypes: (
                                                            component: Component,
                                                            { id, storyById }: DocsContextProps,
                                                            include?: PropDescriptor,
                                                            exclude?: PropDescriptor
                                                            ) => StrictArgTypes;

                                                              function extractTitle

                                                              extractTitle: ({ title }: DocsContextProps) => string;

                                                                function getComponent

                                                                getComponent: (
                                                                props: ArgsTableProps,
                                                                { id, storyById }: DocsContextProps
                                                                ) => Component;

                                                                  function getDescriptionProps

                                                                  getDescriptionProps: (
                                                                  { of, type, markdown, children }: DescriptionProps,
                                                                  { id, storyById }: DocsContextProps<any>
                                                                  ) => PureDescriptionProps;

                                                                    function getSourceProps

                                                                    getSourceProps: (
                                                                    props: SourceProps,
                                                                    docsContext: DocsContextProps<any>,
                                                                    sourceContext: SourceContextProps
                                                                    ) => PureSourceProps & SourceStateProps;

                                                                      function getStoryId

                                                                      getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;

                                                                        function getStoryProps

                                                                        getStoryProps: <TFramework extends AnyFramework>(
                                                                        { height, inline }: StoryProps,
                                                                        story: StoryType<TFramework>,
                                                                        context: DocsContextProps<TFramework>,
                                                                        onStoryFnCalled: () => void
                                                                        ) => ComponentProps<any>;

                                                                          function lookupStoryId

                                                                          lookupStoryId: (
                                                                          storyName: string,
                                                                          { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps
                                                                          ) => string;

                                                                            function Preview

                                                                            Preview: (props: ComponentProps<FC<any>>) => JSX.Element;

                                                                              function Props

                                                                              Props: (props: ComponentProps<FC<ArgsTableProps>>) => JSX.Element;

                                                                                function storyBlockIdFromId

                                                                                storyBlockIdFromId: (storyId: string) => string;


                                                                                  interface AnchorProps

                                                                                  interface AnchorProps {}

                                                                                    property storyId

                                                                                    storyId: string;

                                                                                      interface DocsContainerProps

                                                                                      interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {}

                                                                                        property context

                                                                                        context: DocsContextProps<TFramework>;

                                                                                          interface HeadingProps

                                                                                          interface HeadingProps {}

                                                                                            property children

                                                                                            children: JSX.Element | string;

                                                                                              property disableAnchor

                                                                                              disableAnchor?: boolean;

                                                                                                interface SourceContextProps

                                                                                                interface SourceContextProps {}

                                                                                                  property setSource

                                                                                                  setSource?: (id: StoryId, item: SourceItem) => void;

                                                                                                    property sources

                                                                                                    sources: StorySources;

                                                                                                      interface SourceItem

                                                                                                      interface SourceItem {}

                                                                                                        property code

                                                                                                        code: string;

                                                                                                          property format

                                                                                                          format: SyntaxHighlighterFormatTypes;

                                                                                                            interface StoryData

                                                                                                            interface StoryData {}

                                                                                                              property id

                                                                                                              id?: string;

                                                                                                                property kind

                                                                                                                kind?: string;

                                                                                                                  property name

                                                                                                                  name?: string;

                                                                                                                    property parameters

                                                                                                                    parameters?: any;


                                                                                                                      enum DescriptionType

                                                                                                                      enum DescriptionType {
                                                                                                                      INFO = 'info',
                                                                                                                      NOTES = 'notes',
                                                                                                                      DOCGEN = 'docgen',
                                                                                                                      LEGACY_5_2 = 'legacy-5.2',
                                                                                                                      AUTO = 'auto',

                                                                                                                        member AUTO

                                                                                                                        AUTO = 'auto'

                                                                                                                          member DOCGEN

                                                                                                                          DOCGEN = 'docgen'

                                                                                                                            member INFO

                                                                                                                            INFO = 'info'

                                                                                                                              member LEGACY_5_2

                                                                                                                              LEGACY_5_2 = 'legacy-5.2'

                                                                                                                                member NOTES

                                                                                                                                NOTES = 'notes'

                                                                                                                                  enum SourceState

                                                                                                                                  enum SourceState {
                                                                                                                                  OPEN = 'open',
                                                                                                                                  CLOSED = 'closed',
                                                                                                                                  NONE = 'none',

                                                                                                                                    member CLOSED

                                                                                                                                    CLOSED = 'closed'

                                                                                                                                      member NONE

                                                                                                                                      NONE = 'none'

                                                                                                                                        member OPEN

                                                                                                                                        OPEN = 'open'

                                                                                                                                          Type Aliases

                                                                                                                                          type Component

                                                                                                                                          type Component = any;

                                                                                                                                            type DocsStoryProps

                                                                                                                                            type DocsStoryProps = StoryData & {
                                                                                                                                            expanded?: boolean;
                                                                                                                                            withToolbar?: boolean;

                                                                                                                                              type StoryProps

                                                                                                                                              type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;

                                                                                                                                                type StorySources

                                                                                                                                                type StorySources = Record<StoryId, SourceItem>;

                                                                                                                                                  Package Files (24)

                                                                                                                                                  Dependencies (28)

                                                                                                                                                  Dev Dependencies (3)

                                                                                                                                                  Peer Dependencies (3)


                                                                                                                                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/addon-docs.

                                                                                                                                                  • Markdown
                                                                                                                                                  • HTML
                                                                                                                                                    <a href="https://www.jsdocs.io/package/@storybook/addon-docs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>