Svelte Claps screenshot

Svelte Claps

Author Avatar Theme by Bufgix
Updated: 2 Sep 2022
19 Stars

Adds clap button (like medium) to any page for your SvelteKit apps with Upstash Redis

Categories

Overview:

The svelte-claps package allows you to add a clap button, similar to Medium, to any page in your SvelteKit apps. Originally created for Next.js by @upstash, this package is completely serverless and requires no maintenance. By following a few steps for installation and setup, you can easily integrate this package into your SvelteKit app.

Features:

  • Adds a clap button to any page in your SvelteKit app
  • Completely serverless and requires no maintenance
  • Allows for customization options such as positioning and reply URL

Installation:

To install the svelte-claps package, follow these steps:

  1. Create a free Redis database at Upstash Console.
  2. Set up environment variables by copying the .env.local.example file to .env.local (which will be ignored by Git). The VITE_UPSTASH_URL and VITE_UPSTASH_TOKEN can be found in the database details page in Upstash Console.
  3. Install the package.
  4. Set up a new API endpoint for your SvelteKit app and import the package. Expose the GET and PATCH methods.
  5. Use the <Claps /> component in your SvelteKit app. You can pass options as React props such as key, fixed, replyUrl, and apiPath. By default, the pathname of the page is used as the key/identity to keep track of the claps count, but you can override this by giving the key attribute.

Summary:

The svelte-claps package is a useful tool for SvelteKit apps that allows you to easily add a clap button to any page. With its serverless architecture and customizable options, this package provides a simple and effective way to incorporate interactive clap functionality into your SvelteKit app.