VeltInlineReactionsSectionWireframe
<VeltWireframe>
<VeltInlineReactionsSectionWireframe>
<VeltInlineReactionsSectionWireframe.Panel />
</VeltInlineReactionsSectionWireframe>
</VeltWireframe>
<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
<VeltWireframe>
<VeltInlineReactionsSectionWireframe.Panel>
<VeltInlineReactionsSectionWireframe.ToolContainer />
<VeltInlineReactionsSectionWireframe.List />
</VeltInlineReactionsSectionWireframe.Panel>
</VeltWireframe>
<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>
<VeltWireframe>
<VeltInlineReactionsSectionWireframe.ToolContainer>
<VeltReactionToolWireframe />
</VeltInlineReactionsSectionWireframe.ToolContainer>
</VeltWireframe>
<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
<VeltWireframe>
<VeltReactionToolWireframe />
</VeltWireframe>
<VeltWireframe>
<VeltReactionToolWireframe />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-reaction-tool-wireframe></velt-reaction-tool-wireframe>
</velt-wireframe>
List
<VeltWireframe>
<VeltInlineReactionsSectionWireframe.List>
<VeltReactionPinWireframe />
</VeltInlineReactionsSectionWireframe.List>
</VeltWireframe>
<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
<VeltWireframe>
<VeltReactionPinWireframe />
</VeltWireframe>
<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
<VeltInlineReactionsSection shadowDom={false} />
<VeltInlineReactionsSection shadowDom={false} />
<velt-inline-reactions-section shadow-dom="false"></velt-inline-reactions-section>
Dark Mode
Default: false
Using Props:
<VeltInlineReactionsSection darkMode={true} />
Using API:
const reactionElement = client.getReactionElement();
reactionElement.enableDarkMode();
reactionElement.disableDarkMode();
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.
<VeltWireframe>
<VeltInlineReactionsSection variant="inline"></VeltInlineReactionsSection>
</VeltWireframe>
<VeltWireframe>
<VeltInlineReactionsSection variant="inline"></VeltInlineReactionsSection>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-inline-reactions-section variant="inline"></velt-inline-reactions-section>
</velt-wireframe>
