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

​
VeltInlineReactionsSectionWireframe

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

​
Panel

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

​
ToolContainer

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

​
List

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

​
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 
<VeltInlineReactionsSection shadowDom={false} />

​
Dark Mode

Default: false
Using Props:
<VeltInlineReactionsSection darkMode={true} />
Using API:
const reactionElement = client.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. 
 <VeltWireframe>
    <VeltInlineReactionsSection variant="inline"></VeltInlineReactionsSection>
</VeltWireframe>