Skip to content

Replace dead tweet ID with an active one #204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karol-majewski wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Replace dead tweet ID with an active one #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/custom-tweet-dub/app/light/mdx/post.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { Tweet } from '@/components/tweet'

<Tweet id={'1629307668568633344'} />
<Tweet id={'1975623901893005628'} />
2 changes: 1 addition & 1 deletion apps/next-app/app/light/mdx/post.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { Tweet } from 'react-tweet'

<Tweet id="1629307668568633344" />
<Tweet id="1975623901893005628" />
4 changes: 2 additions & 2 deletions apps/site/pages/api-reference.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function getTweet(

Fetches and returns a [`Tweet`](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/api/types/tweet.ts). It accepts the following params:

- **id** - `string`: the tweet ID. For example in `https://twitter.com/chibicode/status/1629307668568633344` the tweet ID is `1629307668568633344`.
- **id** - `string`: the tweet ID. For example in `https://twitter.com/chibicode/status/1975623901893005628` the tweet ID is `1975623901893005628`.
- **fetchOptions** - `RequestInit` (Optional): options to pass to [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).

If a tweet is not found it returns `undefined`.
Expand Down Expand Up @@ -71,7 +71,7 @@ const useTweet: (

SWR hook for fetching a tweet in the browser. It accepts the following parameters:

- **id** - `string`: the tweet ID. For example in `https://twitter.com/chibicode/status/1629307668568633344` the tweet ID is `1629307668568633344`. This parameter is not used if `apiUrl` is provided.
- **id** - `string`: the tweet ID. For example in `https://twitter.com/chibicode/status/1975623901893005628` the tweet ID is `1975623901893005628`. This parameter is not used if `apiUrl` is provided.
- **apiUrl** - `string`: the API URL to fetch the tweet from. Defaults to `https://react-tweet.vercel.app/api/tweet/:id`.
- **fetchOptions** - `RequestInit` (Optional): options to pass to [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch). Try to pass down a reference to the same object to avoid unnecessary re-renders.

Expand Down
8 changes: 4 additions & 4 deletions apps/site/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

`react-tweet` allows you to embed tweets in your React application when using Next.js, Create React App, Vite, and more. This library does not require using the Twitter API. Tweets can be rendered statically, preventing the need to include an iframe and additional client-side JavaScript.

You can see how it in action in [react-tweet-next.vercel.app/light/1629307668568633344](https://react-tweet-next.vercel.app/light/1629307668568633344). Replace the tweet ID in the URL to see other tweets.
You can see how it in action in [react-tweet-next.vercel.app/light/1975623901893005628](https://react-tweet-next.vercel.app/light/1975623901893005628). Replace the tweet ID in the URL to see other tweets.

This library is fully compatible with React Server Components. [Learn more](https://nextjs.org/docs/getting-started/react-essentials#server-components).

Expand Down Expand Up @@ -40,15 +40,15 @@ The closest `data-theme` attribute on a parent element can determine the theme o

```tsx
<div data-theme="dark">
<Tweet id="1629307668568633344" />
<Tweet id="1975623901893005628" />
</div>
```

Alternatively, a parent with the class `light` or `dark` will also work:

```tsx
<div className="dark">
<Tweet id="1629307668568633344" />
<Tweet id="1975623901893005628" />
</div>
```

Expand Down Expand Up @@ -118,6 +118,6 @@ const Page = ({ params }: { params: { tweet: string } }) => (
export default Page
```

You can see it working at [react-tweet-next.vercel.app/light/vercel-kv/1629307668568633344](https://react-tweet-next.vercel.app/light/vercel-kv/1629307668568633344) ([source](https://github.com/vercel/react-tweet/blob/main/apps/next-app/app/light/vercel-kv/%5Btweet%5D/page.tsx)).
You can see it working at [react-tweet-next.vercel.app/light/vercel-kv/1975623901893005628](https://react-tweet-next.vercel.app/light/vercel-kv/1975623901893005628) ([source](https://github.com/vercel/react-tweet/blob/main/apps/next-app/app/light/vercel-kv/%5Btweet%5D/page.tsx)).

If you're using Next.js then using [`unstable_cache`](/next#enabling-cache) works too.
12 changes: 6 additions & 6 deletions apps/site/pages/next.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,12 +158,12 @@ The app will be up and running at http://localhost:3001 for the [Next.js app exa

The app shows the usage of `react-tweet` in different scenarios:

- [localhost:3001/light/1629307668568633344](http://localhost:3001/light/1629307668568633344) renders the tweet in the app router.
- [localhost:3001/dark/1629307668568633344](http://localhost:3001/dark/1629307668568633344) renders the tweet using SSG in the pages directory.
- [localhost:3001/light/1975623901893005628](http://localhost:3001/light/1975623901893005628) renders the tweet in the app router.
- [localhost:3001/dark/1975623901893005628](http://localhost:3001/dark/1975623901893005628) renders the tweet using SSG in the pages directory.
- [localhost:3001/light/mdx](http://localhost:3001/light/mdx) rendes the tweet in MDX (with the experimental `mdxRs` config enabled).
- [localhost:3001/light/suspense/1629307668568633344](http://localhost:3001/light/suspense/1629307668568633344) renders the tweet with a custom `Suspense` wrapper.
- [localhost:3001/dark/swr/1629307668568633344](http://localhost:3001/dark/swr/1629307668568633344) uses `apiUrl` to change the API endpoint from which the tweet is fetched in SWR mode.
- [localhost:3001/light/cache/1629307668568633344](http://localhost:3001/light/suspense/1629307668568633344) renders the tweet while caching the tweet data with [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache).
- [localhost:3001/light/vercel-kv/1629307668568633344](http://localhost:3001/light/suspense/1629307668568633344) renders the tweet while caching the tweet data with [Vercel KV](https://vercel.com/docs/storage/vercel-kv).
- [localhost:3001/light/suspense/1975623901893005628](http://localhost:3001/light/suspense/1975623901893005628) renders the tweet with a custom `Suspense` wrapper.
- [localhost:3001/dark/swr/1975623901893005628](http://localhost:3001/dark/swr/1975623901893005628) uses `apiUrl` to change the API endpoint from which the tweet is fetched in SWR mode.
- [localhost:3001/light/cache/1975623901893005628](http://localhost:3001/light/suspense/1975623901893005628) renders the tweet while caching the tweet data with [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache).
- [localhost:3001/light/vercel-kv/1975623901893005628](http://localhost:3001/light/suspense/1975623901893005628) renders the tweet while caching the tweet data with [Vercel KV](https://vercel.com/docs/storage/vercel-kv).

The source code for `react-tweet` is imported from [packages/react-tweet](https://github.com/vercel/react-tweet/tree/main/packages/react-tweet) and any changes you make to it will be reflected in the app immediately.
4 changes: 2 additions & 2 deletions apps/site/pages/twitter-theme/api-reference.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { Tweet } from 'react-tweet'
```

```tsx copy
<Tweet id="1629307668568633344">
<Tweet id="1975623901893005628">
```

Fetches and renders the tweet. It accepts the following props:

- **id** - `string`: the tweet ID. For example in `https://twitter.com/chibicode/status/1629307668568633344` the tweet ID is `1629307668568633344`. This is the only required prop.
- **id** - `string`: the tweet ID. For example in `https://twitter.com/chibicode/status/1975623901893005628` the tweet ID is `1975623901893005628`. This is the only required prop.
- **apiUrl** - `string`: the API URL to fetch the tweet from when using the tweet client-side with SWR. Defaults to `https://react-tweet.vercel.app/api/tweet/:id`.
- **fallback** - `ReactNode`: The fallback component to render while the tweet is loading. Defaults to `TweetSkeleton`.
- **onError** - `(error?: any) => any`: The returned error will be sent to the `TweetNotFound` component.
Expand Down
2 changes: 1 addition & 1 deletion apps/site/pages/vite.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@ The app will be up and running at http://localhost:5173 for the [Vite app exampl
The app shows the usage of `react-tweet` in different scenarios:

- [localhost:5173/](http://localhost:5173) renders a single tweet.
- [localhost:5173/tweet/1629307668568633344](http://localhost:5173/tweet/1629307668568633344) renders dynamic tweets with SWR. `Tweet` already uses SWR and this page shows how to implement it manually.
- [localhost:5173/tweet/1975623901893005628](http://localhost:5173/tweet/1975623901893005628) renders dynamic tweets with SWR. `Tweet` already uses SWR and this page shows how to implement it manually.

The source code for `react-tweet` is imported from [packages/react-tweet](https://github.com/vercel/react-tweet/tree/main/packages/react-tweet) and any changes you make to it will be reflected in the app immediately.