{"id":16530868,"url":"https://github.com/bufgix/svelte-claps","last_synced_at":"2025-10-28T11:30:37.951Z","repository":{"id":54351316,"uuid":"522166529","full_name":"bufgix/svelte-claps","owner":"bufgix","description":"Adds clap button (like medium) to any page for your SvelteKit apps with Upstash Redis","archived":false,"fork":false,"pushed_at":"2022-09-02T09:58:25.000Z","size":76,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T21:03:26.551Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.farukoruc.com/claps-demo","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bufgix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-07T09:17:02.000Z","updated_at":"2023-04-06T22:31:37.000Z","dependencies_parsed_at":"2022-08-13T13:00:47.573Z","dependency_job_id":null,"html_url":"https://github.com/bufgix/svelte-claps","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufgix%2Fsvelte-claps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufgix%2Fsvelte-claps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufgix%2Fsvelte-claps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bufgix%2Fsvelte-claps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bufgix","download_url":"https://codeload.github.com/bufgix/svelte-claps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238638253,"owners_count":19505564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T18:07:23.178Z","updated_at":"2025-10-28T11:30:37.566Z","avatar_url":"https://github.com/bufgix.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-claps\n\nAdds clap button (like medium) to any page for your SvelteKit apps.\n\nThis package originally was created for Next.js by [@upstash](https://github.com/upstash/claps)\n\nNothing to maintain, it is completely serverless 💯\n\nCheck out the [demo](https://www.farukoruc.com/claps-demo)\n\n\n\n\n\n\nhttps://user-images.githubusercontent.com/22038798/188115038-c1edd555-7b9f-4175-bb07-a4531bea8386.mp4\n\n\n\n\n\n## Installation\n\n### 1 Create Database\n\nCreate a free Redis database at [Upstash Console](https://console.upstash.com)\n\n\u003e We will use [Upstash Redis](https://upstash.com) to keep the data as well as\n\u003e messaging (Redis pub/sub).\n\n### 2. Environment Variables\n\nCopy the `.env.local.example` file to `.env.local` (which will be ignored by\nGit):\n\n```bash\ncp .env.local.example .env.local\n```\n\n\u003e `VITE_UPSTASH_URL` and `VITE_UPSTASH_TOKEN` can be found at the\n\u003e database details page in Upstash Console.\n\n### 3. Install Package\n\n```bash\nnpm install --save svelte-claps\n# or\nyarn add svelte-claps\n```\n\n### 4. Setup API\n\nCreate a new API endpoint for SvelteKit app. Import the package and expose the\n`GET` and `PATCH` methods.\n\n```ts\n// src/routes/api/claps.js\n\nimport createClapsApi from 'svelte-claps';\n\nexport const { GET, PATCH } = createClapsApi({ maxClaps: 10 });\n```\n\n### 5. Use `\u003cClaps /\u003e` Component\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { Claps } from 'svelte-claps';\n\u003c/script\u003e\n\n\u003cdiv class=\"container\"\u003e\n\t\u003cClaps replyUrl=\"https://twitter.com/bufgix_\" /\u003e\n\u003c/div\u003e\n\n```\n\nThe options can be passed as React props\n\n| key           | type                        | default           |\n| ------------- | --------------------------- |-------------------|\n| `key?`        | `string`                    | current page path |\n| `fixed?`      | `\"left\", \"center\", \"right\"` |                   |\n| `replyUrl?`   | `string`                    |                   |\n| `apiPath?`    | `string`                    | `/api/claps`      |\n\n\u003e pathname of the page is being used as the key/identity to keep the claps count. You\n\u003e can override this giving the `key` attribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbufgix%2Fsvelte-claps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbufgix%2Fsvelte-claps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbufgix%2Fsvelte-claps/lists"}