diff --git a/apps/custom-tweet-dub/app/light/mdx/post.mdx b/apps/custom-tweet-dub/app/light/mdx/post.mdx index a443397f..d0fb3682 100644 --- a/apps/custom-tweet-dub/app/light/mdx/post.mdx +++ b/apps/custom-tweet-dub/app/light/mdx/post.mdx @@ -1,3 +1,3 @@ import { Tweet } from '@/components/tweet' - + diff --git a/apps/next-app/app/light/mdx/post.mdx b/apps/next-app/app/light/mdx/post.mdx index efe909fe..e83c9e6f 100644 --- a/apps/next-app/app/light/mdx/post.mdx +++ b/apps/next-app/app/light/mdx/post.mdx @@ -1,3 +1,3 @@ import { Tweet } from 'react-tweet' - + diff --git a/apps/site/pages/api-reference.mdx b/apps/site/pages/api-reference.mdx index 6ff62618..b77fcd83 100644 --- a/apps/site/pages/api-reference.mdx +++ b/apps/site/pages/api-reference.mdx @@ -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`. @@ -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. diff --git a/apps/site/pages/index.mdx b/apps/site/pages/index.mdx index 48afead9..85e33237 100644 --- a/apps/site/pages/index.mdx +++ b/apps/site/pages/index.mdx @@ -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). @@ -40,7 +40,7 @@ The closest `data-theme` attribute on a parent element can determine the theme o ```tsx
- +
``` @@ -48,7 +48,7 @@ Alternatively, a parent with the class `light` or `dark` will also work: ```tsx
- +
``` @@ -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. diff --git a/apps/site/pages/next.mdx b/apps/site/pages/next.mdx index 5b21ac4e..9d0ac402 100644 --- a/apps/site/pages/next.mdx +++ b/apps/site/pages/next.mdx @@ -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. diff --git a/apps/site/pages/twitter-theme/api-reference.mdx b/apps/site/pages/twitter-theme/api-reference.mdx index 9c80395d..5bd14426 100644 --- a/apps/site/pages/twitter-theme/api-reference.mdx +++ b/apps/site/pages/twitter-theme/api-reference.mdx @@ -7,12 +7,12 @@ import { Tweet } from 'react-tweet' ``` ```tsx copy - + ``` 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. diff --git a/apps/site/pages/vite.mdx b/apps/site/pages/vite.mdx index 03e4e71f..531078ba 100644 --- a/apps/site/pages/vite.mdx +++ b/apps/site/pages/vite.mdx @@ -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.