Svelte Reactions 🙂

A siimple and pretty component to add reactions in your application

REPL

---

🚀 Install

Using npm

  npm i svelte-reactions

Or using yarn

  yarn add svelte-reactions

🤔 Usage

Using js

<script>
    import 'svelte-reactions/global.css';
    import { Trigger } from 'svelte-reactions';

        const reactions = [
            {
                id: '1',
                reaction: '👍',
                quantity: 100,
                clicked: false
            }
        ];
</script>

<Trigger bind:reactions />

Using ts

<script lang="ts">
    import 'svelte-reactions/global.css';
    import { Trigger, type ReactionType } from 'svelte-reactions';

        const reactions: ReactionType = [
            {
                id: '1',
                reaction: '👍',
                quantity: 100,
                clicked: false
            }
        ];
</script>

<Trigger bind:reactions />

For more expamples go to the REPL

🎨 Theming

We expose some CSS Variables to make more easy customize the colors of the component:

Variable	Description
--srTriggerBg	Define the background color of default Trigger component
--srTriggerColor	Define the text color of default Trigger component
--srTriggerHoverBg	Define the background hover color of default Trigger component
--srTriggerContainerBoxShadow	Define the style box shadow of the reactions container
--srTriggerContainerBg	Define the background color of the reactions container
--srReactionClickedBg	Define the background color of reaction block when this is already clicked
--srReactionNotClickedBg	Define the background color of reaction block when this is not already clicked
--srReactionHoverBg	Define the background hover color of reaction block
--srReactionClickedHoverBg	Define the background hover color of reaction block when this is already clicked
--srEmojiColor	Define the text color of reaction
--srEmojiClickedColor	Define the text color of reaction when this is already clicked
--srLabelBorderColor	Define the border color of default label component
--srLabelClickedBorderColor	Define the border color of default label component when reaction is already clicked
--srLabelBg	Define the background color of default label component
--srLabelClickedBg	Define the background color of default label component when reaction is already clicked
--srLabelColor	Define the text color of default label component
--srLabelClickedColor	Define the text color of default label component when reaction is already clicked
--srLabelHoverBg	Define the background hover color of default label component
--srLabelClickedHoverBg	Define the background hover color of default label component when reaction is already clicked

Then you can use this variables to customize the component, for example:

<!-- CustomReactionComponent.svelte -->
    
<script>
    import { Trigger } from 'svelte-reaction';
    
    export let reactions;
    export let showLabels = true;
    export let position = 'bottom-left'
</script>
    
<Trigger {reactions} {showLabels} {position} />

<style global>
    :root {
        --srTriggerBg: red;
        --srTriggerHoverBg: blue;
        --srTriggerColor: white;
     }
</style>

If you need to be more strict, always you can overwrite the next classes to get the better result:

Class name	Description
.trigger-container	Default class for default trigger and labels container
.trigger	Default class for default trigger element
.reactions-container	Default class for the reactions contanier (floating component)
.reaction	Default class for the reaction element
.emoji	Default class for the emoji element
.labels-container	Deault class for the labels container
.label	Default class for the label element
.label-component	Default class for the label element, when the reaction is defined as SvelteComponent insted of String

Remember alway use global styles for overwriting CSS variables and classes

📂 API

ReactionType attributes

Property	Type	Description
id	string	Identifier of a reaction, useful for bind data with your database.
reaction	string | SvelteComponent	You can use any string for a reaction, however we recomend you to use a string with 1 value of lenght, when you use an SvelteComponent as reaction, components like svg or img or any other, we recomend you to use this sizes: width between 20px and 35px same as height.
labelReaction	string | SvelteComponent | undefined	Same as reaction property, this define the reaction representation on summary labels (by default this value is equal to provided reaction value
quantity	number	Define the quantity of reactions, for example 50 likes in some post.
clicked	boolean	Define if the current user clicked some reaction.

Placment type

This type is used on the <Trigger /> component props, for example:

  <Trigger position='bottom-left' />

valid values:

'bottom-left' | 'top-left' | 'bottom-right' | 'top-right'

Trigger properties

Property	Type	Description
reactions	ReactionType[]	Define the set of reactions.
showLabels	boolean	Define if the component generate summary of reactionis.
position	Placement	Define the placement of the reactions containers.
on:reaction	CustomEvent	Throw an event when some reaction is clicked