glennreyes / glennreyes/react-countup
Add how to use react-countup with NextJS 13 app directory
- Dominant language
- JavaScript
- Stars
- 2.1k
- Forks
- 138
- PR merge metrics
- No merged PRs in 30d
Description
I think it would be very useful to add in the documentation how to use it in the nextjs server components, at first it took me a bit to understand it and it can help more than one developer.
[NextJS doc
](https://beta.nextjs.org/docs/rendering/server-and-client-components)
Example:
if you try to use it directly within a Server Component, you'll see an error:
```
import { CountUp } from 'acme-carousel';
export default function Page() {
return (
Numeric Counter
);
}
```
This is because Next.js doesn't know is using client-only features.
To fix this, you can wrap third-party components that rely on client-only features in your own Client Components:
```
'use client'
import CountUp, { CountUpProps } from 'react-countup'
export const NumberTransition = (props: CountUpProps) => {
return
}
```
Now, you can use directly within a Server Component:
```
import Carousel from './carousel';
export default function Page() {
return (
Numeric Counter
);
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.