https://github.com/ryoppippi/sveltweet
Svelte/SvelteKit version of react-tweet
https://github.com/ryoppippi/sveltweet
svelte svetlekit tweet
Last synced: 11 months ago
JSON representation
Svelte/SvelteKit version of react-tweet
- Host: GitHub
- URL: https://github.com/ryoppippi/sveltweet
- Owner: ryoppippi
- License: mit
- Created: 2024-07-29T18:52:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-05T18:46:17.000Z (over 1 year ago)
- Last Synced: 2025-02-05T19:54:43.587Z (over 1 year ago)
- Topics: svelte, svetlekit, tweet
- Language: Svelte
- Homepage: https://sveltweet.vercel.app
- Size: 1.1 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yaml
- License: LICENSE
Awesome Lists containing this project
README
# Sveltweet (__Svelte + Tweet__)
[](https://npmjs.com/package/sveltweet)
[](https://npmjs.com/package/sveltweet)
The best way to embed tweets in your Svelte app, supporting both SSR and static prerendering modes.
- The tweet is loaded in the server-side.
- No need for any additional client-side scripts.
- No need for any loading UI, the tweet is available immediately.
- Supports both SSR and prerendering.
> This package is a Svelte version of [vercel/react-tweet](https://github.com/vercel/react-tweet) licensed under MIT License, many thanks to the original authors for making it possible!
> This repo is fork of [fayez-nazzal/sveltekit-tweet](https://github.com/fayez-nazzal/sveltekit-tweet)
## Requirements
- Svelte 5.16.0 or later ( This library uses [`runes`](https://svelte-5-preview.vercel.app/docs/runes) )
## Installation
```bash
npx nypm add sveltweet
```
## Usage
### SvelteKit
#### Recommended: Using Remote Functions
The simplest way to embed tweets is using [SvelteKit's remote functions](https://svelte.dev/docs/kit/remote-functions). This approach allows you to fetch tweet data directly inside your components without setting up separate server files.
1. Create a remote function to fetch tweet data:
```ts
// src/lib/tweet.remote.ts
import { query } from '@sveltejs/kit';
import { getTweet } from 'sveltweet/api';
export const getTweetData = query(async (id: string) => getTweet(id));
```
2. Use it directly in your component:
Recommended way to use the `Tweet` component with remote functions:
```svelte
import { Tweet } from 'sveltweet';
import { getTweetData } from '$lib/tweet.remote';
{#snippet pending()}
{/snippet}
{#snippet failed()}
{/snippet}
```
Or, if you prefer to handle loading states manually:
```svelte
import { Tweet } from 'sveltweet';
import { getTweetData } from '$lib/tweet.remote';
const tweetId = '1234567890';
const tweet = getTweetData(tweetId);
{#if tweet.error}
Error loading tweet: {tweet.error.message}
{:else if tweet.loading}
Loading tweet...
{:else if tweet.ready}
{/if}
```
> [!NOTE]
> Remote functions and await syntax require configuration. See the [SvelteKit remote functions documentation](https://svelte.dev/docs/kit/remote-functions) and [Svelte await expressions documentation](https://svelte.dev/docs/svelte/await-expressions) for setup instructions.
> [!IMPORTANT]
> When using `await` directly, make sure to wrap your component with `` for error handling. See the [Svelte boundary documentation](https://svelte.dev/docs/svelte/svelte-boundary) for details.
#### Alternative: Using Traditional Loaders
If you prefer the traditional approach or need more control over data loading:
1. Go to the tweet you want to embed. You will find the URL
2. Use the `getTweet` function in your `+page.server.ts` file to fetch the tweet data.
```ts
import { getTweet } from 'sveltweet/api';
import { error } from '@sveltejs/kit';
import type { RequestEvent } from './$types';
export async function load({ params }: RequestEvent) {
const { id } = params;
try {
const tweet = await getTweet(id);
return { tweet };
}
catch {
return error(500, 'Could not load tweet');
}
}
```
3. Use the `Tweet` component in your `+page.svelte` file to render the tweet.
```svelte
import { Tweet } from 'sveltweet';
import type { PageData } from './$types';
const { data }: { data: PageData } = $props()
```
### Svelte
```svelte
import { Tweet } from 'sveltweet';
import { getTweet } from 'sveltweet/api';
const id = '';
{#await getTweet(id) then tweet}
{/await}
```
## Customisation
`Tweet` shares the same CSS file with [`react-tweet`](https://react-tweet.vercel.app/).
So, refer to the [`Custom Theme`](https://react-tweet.vercel.app/custom-theme) section in the `react-tweet` documentation to customise the tweet appearance.
# License
[MIT](./LICENSE)