Inline Reactions Section

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltInlineReactionsSectionWireframe

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltInlineReactionsSectionWireframe>
        <VeltInlineReactionsSectionWireframe.Panel />
    </VeltInlineReactionsSectionWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-inline-reactions-section-wireframe>
        <velt-inline-reactions-section-panel-wireframe></velt-inline-reactions-section-panel-wireframe>
    </velt-inline-reactions-section-wireframe>
</velt-wireframe>

Panel

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltInlineReactionsSectionWireframe.Panel>
        <VeltInlineReactionsSectionWireframe.ToolContainer />
        <VeltInlineReactionsSectionWireframe.List />
    </VeltInlineReactionsSectionWireframe.Panel>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-inline-reactions-section-panel-wireframe>
        <velt-inline-reactions-section-tool-container-wireframe></velt-inline-reactions-section-tool-container-wireframe>
        <velt-inline-reactions-section-list-wireframe></velt-inline-reactions-section-list-wireframe>
    </velt-inline-reactions-section-panel-wireframe>
</velt-wireframe>

ToolContainer

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltInlineReactionsSectionWireframe.ToolContainer>
        <VeltReactionToolWireframe />
    </VeltInlineReactionsSectionWireframe.ToolContainer>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-inline-reactions-section-tool-container-wireframe>
        <velt-reaction-tool-wireframe></velt-reaction-tool-wireframe>
    </velt-inline-reactions-section-tool-container-wireframe>
</velt-wireframe>

VeltReactionToolWireframe

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltReactionToolWireframe />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-reaction-tool-wireframe></velt-reaction-tool-wireframe>
</velt-wireframe>

List

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltInlineReactionsSectionWireframe.List>
        <VeltReactionPinWireframe />
    </VeltInlineReactionsSectionWireframe.List>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-inline-reactions-section-list-wireframe>
        <velt-reaction-pin-wireframe></velt-reaction-pin-wireframe>
    </velt-inline-reactions-section-list-wireframe>
</velt-wireframe>

VeltReactionPinWireframe

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltReactionPinWireframe />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-reaction-pin-wireframe></velt-reaction-pin-wireframe>
</velt-wireframe>

Styling

Disable ShadowDOM

By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
Disable the shadow dom to apply your custom CSS to the component.

Default: true

React / Next.js
Other Frameworks

<VeltInlineReactionsSection shadowDom={false} />

<velt-inline-reactions-section shadow-dom="false"></velt-inline-reactions-section>

Dark Mode

Default: false

React / Next.js
Other Frameworks

Using Props:

<VeltInlineReactionsSection darkMode={true} />

Using API:

const reactionElement = client.getReactionElement();
reactionElement.enableDarkMode();
reactionElement.disableDarkMode();

Using Props:

<velt-inline-reactions-section dark-mode="true"></velt-inline-reactions-section>

Using API:

const reactionElement = Velt.getReactionElement();
reactionElement.enableDarkMode();
reactionElement.disableDarkMode();

Variants

Pre-defined Variants

The Inline Reactions has 1 pre-defined variant:

inline: This will customize the default components inside the Inline Reactions Component.

You can define your own variants and use them in different places of your app.

React / Next.js
Other Frameworks

 <VeltWireframe>
    <VeltInlineReactionsSection variant="inline"></VeltInlineReactionsSection>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-inline-reactions-section variant="inline"></velt-inline-reactions-section>
</velt-wireframe>

​VeltInlineReactionsSectionWireframe

​Panel

​ToolContainer

VeltReactionToolWireframe

​List

VeltReactionPinWireframe

​Styling

​Disable ShadowDOM

​Dark Mode

​Variants

​Pre-defined Variants

VeltInlineReactionsSectionWireframe

Panel

ToolContainer

List

Styling

Disable ShadowDOM

Dark Mode

Variants

Pre-defined Variants