Adds clap button (like medium) to any page for your SvelteKit apps with Upstash Redis
Adds clap button (like medium) to any page for your SvelteKit apps.
This package originally was created for Next.js by @upstash
Nothing to maintain, it is completely serverless 💯
Check out the demo
Create a free Redis database at Upstash Console
We will use Upstash Redis to keep the data as well as messaging (Redis pub/sub).
Copy the .env.local.example
file to .env.local
(which will be ignored by
Git):
cp .env.local.example .env.local
VITE_UPSTASH_URL
andVITE_UPSTASH_TOKEN
can be found at the database details page in Upstash Console.
npm install --save svelte-claps
# or
yarn add svelte-claps
Create a new API endpoint for SvelteKit app. Import the package and expose the
GET
and PATCH
methods.
// src/routes/api/claps.js
import createClapsApi from 'svelte-claps';
export const { GET, PATCH } = createClapsApi({ maxClaps: 10 });
<Claps />
Component<script lang="ts">
import { Claps } from 'svelte-claps';
</script>
<div class="container">
<Claps replyUrl="https://twitter.com/bufgix_" />
</div>
The options can be passed as React props
key | type | default |
---|---|---|
key? |
string |
current page path |
fixed? |
"left", "center", "right" |
|
replyUrl? |
string |
|
apiPath? |
string |
/api/claps |
pathname of the page is being used as the key/identity to keep the claps count. You can override this giving the
key
attribute.