Use GifSnap with Next.js

Keep your page on the server and put the interactive GIF picker in a small Client Component. This guide uses the Next.js App Router.

1. Install the package

npm install @rowix/gifsnap-react

The picker needs browser events and React state. Keep that interaction behind a client boundary rather than turning your whole page into a Client Component.

2. Import its stylesheet once

Add the package stylesheet to your root layout, alongside your application’s CSS. Keep your existing fonts, metadata, and providers in place.

import '@rowix/gifsnap-react/styles.css';
import './globals.css';

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return <html lang="en"><body>{children}</body></html>;
}

3. Create a Client Component

Put 'use client' at the top of the component that owns the selection callback. The selected object can stay in React state until your app is ready to use it.

'use client';

import { useState } from 'react';
import { GifPicker, type GifSnapGif } from '@rowix/gifsnap-react';

export default function GifComposer() {
  const [selected, setSelected] = useState<GifSnapGif | null>(null);

  return (
    <section>
      <GifPicker onSelect={setSelected} theme="system" />
      <p role="status">
        {selected ? 'Selected: ' + selected.title : 'Choose a GIF'}
      </p>
    </section>
  );
}

4. Render it from your page

Your page can remain a Server Component. Import the composer normally; define onSelect inside the Client Component rather than passing a function across the server boundary.

import GifComposer from './components/GifComposer';

export default function Page() {
  return (
    <main>
      <h1>Start a conversation</h1>
      <GifComposer />
    </main>
  );
}

A note on media hosts and themes

The picker displays returned media URLs with native image elements. If you render a selected item with next/image, configure your app’s remotePatterns for the actual media host you receive. Returned URLs are not limited to gifsnap.com.

Use theme="system" to follow the operating system. When your application has its own light/dark preference, pass the resolved theme explicitly.

See the React guide for picker props and selection handling, or the REST examples for a custom interface.