https://github.com/upstash/claps
Adds clap button (like medium) to any page for your Next.js apps.
https://github.com/upstash/claps
nextjs react redis
Last synced: 6 months ago
JSON representation
Adds clap button (like medium) to any page for your Next.js apps.
- Host: GitHub
- URL: https://github.com/upstash/claps
- Owner: upstash
- License: mit
- Created: 2022-07-06T12:14:55.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-30T06:33:41.000Z (11 months ago)
- Last Synced: 2025-06-11T06:53:29.795Z (7 months ago)
- Topics: nextjs, react, redis
- Language: TypeScript
- Homepage: https://upstash-claps.vercel.app/
- Size: 136 KB
- Stars: 118
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @upstash/claps
> [!NOTE]
> **This project is a Community Project.**
>
> The project is maintained and supported by the community. Upstash may contribute but does not officially support or assume responsibility for it.
Add a claps button (like medium) to any page for your Next.js apps.
Nothing to maintain, it is completely serverless 💯
Check out [the demo](https://upstash-claps.vercel.app).
### 1. Create Database
Create a free Redis database at [Upstash Console](https://console.upstash.com)
> We will use [Upstash Redis](https://upstash.com) to keep the data as well as
> messaging (Redis pub/sub).
### 2. Environment Variables
Copy the `.env.local.example` file to `.env.local` (which will be ignored by
Git):
```bash
cp .env.local.example .env.local
```
> `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` can be found at the
> database details page in Upstash Console.
### 3. Install Package
```bash
yarn add @upstash/claps
```
### 4. Import CSS
```jsx
// pages/_app.js
import "@upstash/claps/style.css";
export default function MyApp({ Component, pageProps }) {
return ;
}
```
### 4. Import Components
```jsx
// pages/example.js
import Claps from "@upstash/claps";
export default function Example() {
return (
)
}
```
The options can be passed as React props
| key | type | default |
| ------------- | --------------------------- | ------------ |
| `key?` | `string` | |
| `fixed?` | `"left", "center", "right"` | |
| `replyUrl?` | `string` | |
| `replyCount?` | `string` | |
| `apiPath?` | `string` | `/api/claps` |
| `iconClap?` | `null, React.ReactElement` | |
| `iconReply?` | `null, React.ReactElement` | |
> Url of the page is being used as the key/identity to keep the claps count. You
> can override this giving the `key` attribute.
### 5. Create API
```js
// pages/api/claps.js
import createClapsAPI from "@upstash/claps/api";
const ClapsAPI = createClapsAPI({
// maxClaps: 10
});
export default ClapsAPI;
```
### Support
Use [Upstash Discord](https://upstash.com/discord) channel to get support.