Sanity Library Reference Docs
    Preparing search index...

    Interface PortableTextReactComponents

    Object definining the different React components to use for rendering various aspects of Portable Text and user-provided types.

    interface PortableTextReactComponents {
        block:
            | PortableTextBlockComponent
            | LooseRecord<
                PortableTextBlockStyle,
                (PortableTextBlockComponent | undefined),
            >;
        hardBreak: false | ComponentType;
        list:
            | PortableTextListComponent
            | LooseRecord<
                PortableTextListItemType,
                (PortableTextListComponent | undefined),
            >;
        listItem:
            | PortableTextListItemComponent
            | LooseRecord<
                PortableTextListItemType,
                (PortableTextListItemComponent | undefined),
            >;
        marks: Record<string, PortableTextMarkComponent | undefined>;
        types: Record<string, PortableTextTypeComponent | undefined>;
        unknownBlockStyle: PortableTextComponent<
            PortableTextBlock<
                PortableTextMarkDefinition,
                ArbitraryTypedObject
                | PortableTextSpan,
                PortableTextBlockStyle,
                PortableTextListItemType,
            >,
        >;
        unknownList: PortableTextComponent<ToolkitPortableTextList>;
        unknownListItem: PortableTextComponent<
            PortableTextListItemBlock<
                PortableTextMarkDefinition,
                PortableTextSpan,
                PortableTextBlockStyle,
                PortableTextListItemType,
            >,
        >;
        unknownMark: PortableTextMarkComponent;
        unknownType: PortableTextComponent<UnknownNodeType>;
    }
    Index

    Properties

    block hardBreak list listItem marks types unknownBlockStyle unknownList unknownListItem unknownMark unknownType

    Properties

    block:
        | PortableTextBlockComponent
        | LooseRecord<
            PortableTextBlockStyle,
            (PortableTextBlockComponent | undefined),
        >

    Object of React components that renders blocks with different style properties.

    The object has the shape {styleName: ReactComponent}, where styleName is the value set in individual style attributes on blocks.

    Can also be set to a single React component, which would handle block styles of any type.

    hardBreak: false | ComponentType

    Component to use for rendering "hard breaks", eg \n inside of text spans Will by default render a <br />. Pass false to render as-is (\n)

    list:
        | PortableTextListComponent
        | LooseRecord<
            PortableTextListItemType,
            (PortableTextListComponent | undefined),
        >

    Object of React components used to render lists of different types (bulleted vs numbered, for instance, which by default is <ul> and <ol>, respectively)

    There is no actual "list" node type in the Portable Text specification, but a series of list item blocks with the same level and listItem properties will be grouped into a virtual one inside of this library.

    Can also be set to a single React component, which would handle lists of any type.

    listItem:
        | PortableTextListItemComponent
        | LooseRecord<
            PortableTextListItemType,
            (PortableTextListItemComponent | undefined),
        >

    Object of React components used to render different list item styles.

    The object has the shape {listItemType: ReactComponent}, where listItemType is the value set in individual listItem attributes on blocks.

    Can also be set to a single React component, which would handle list items of any type.

    marks: Record<string, PortableTextMarkComponent | undefined>

    Object of React components that renders different types of marks that might appear in spans.

    The object has the shape {markName: ReactComponent}, where markName is the value set in individual _type attributes, values being stored in the parent blocks markDefs.

    types: Record<string, PortableTextTypeComponent | undefined>

    Object of React components that renders different types of objects that might appear both as part of the blocks array, or as inline objects inside of a block, alongside text spans.

    Use the isInline property to check whether or not this is an inline object or a block

    The object has the shape {typeName: ReactComponent}, where typeName is the value set in individual _type attributes.

    unknownBlockStyle: PortableTextComponent<
        PortableTextBlock<
            PortableTextMarkDefinition,
            ArbitraryTypedObject
            | PortableTextSpan,
            PortableTextBlockStyle,
            PortableTextListItemType,
        >,
    >

    React component used when encountering a block style there is no registered component for in the components.block prop. Only used if components.block is an object.

    unknownList: PortableTextComponent<ToolkitPortableTextList>

    React component used when encountering a list style there is no registered component for in the components.list prop. Only used if components.list is an object.

    unknownListItem: PortableTextComponent<
        PortableTextListItemBlock<
            PortableTextMarkDefinition,
            PortableTextSpan,
            PortableTextBlockStyle,
            PortableTextListItemType,
        >,
    >

    React component used when encountering a list item style there is no registered component for in the components.listItem prop. Only used if components.listItem is an object.

    unknownMark: PortableTextMarkComponent

    React component used when encountering a mark type there is no registered component for in the components.marks prop.

    unknownType: PortableTextComponent<UnknownNodeType>

    React component used when encountering an object type there is no registered component for in the components.types prop.

    Settings

    Member Visibility

    On This Page

    Properties