How to use third-party client components in Next.js

If you need to use a third-party client component that doesn’t have a 'use client' directive, wrap the component in your own client component which has the directive.

For example, here we use the <Carousel> component from the acme-carousel library but wrap it in our own client component which has the "use client' directive.

'use client'
 
import { useState } from 'react'
import { Carousel } from 'acme-carousel'
 
export default function Gallery() {
  const [isOpen, setIsOpen] = useState(false)
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>View pictures</button>
      {/* Works, since Carousel is used within a Client Component */}
      {isOpen && <Carousel />}
    </div>
  )
}