Add a GIF picker to React

Connect GIF search to your own composer with a typed selection callback, simple state, and a theme that fits your app.

1. Install and import the styles

Add the package to your React project and import @rowix/gifsnap-react/styles.css once. The stylesheet is scoped to the picker. For the App Router, follow the Next.js guide.

Install with npm

npm install @rowix/gifsnap-react

2. Store the selected GIF

onSelect receives a GifSnapGif object. Keep that object in your state so your composer can use its media URL, dimensions, title, and source metadata together.

MessageComposer.tsx

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

export default function MessageComposer() {
  const [gif, setGif] = useState<GifSnapGif | null>(null);

  return (
    <>
      <GifPicker onSelect={setGif} theme="system" />
      {gif && (
        <img src={gif.url} alt={gif.title || 'Selected GIF'}
          width={gif.width} height={gif.height}
          style={{ maxWidth: '100%', height: 'auto' }} />
      )}
    </>
  );
}

3. Fit it to your interface

The picker can follow the operating system or use an explicit appearance. If your app has its own theme setting, pass that value as theme so both interfaces stay in sync.

Picker options

<GifPicker
  onSelect={setSelectedGif}
  theme="dark"
  initialQuery="celebrate"
  pageSize={12}
  className="composer-picker"
/>

Prop	Purpose
`onSelect`	Required callback receiving the selected `GifSnapGif`.
`theme`	`light`, `dark`, or `system`.
`initialQuery`	Start with a search. An empty query browses trending GIFs.
`pageSize`	Requested number of items in each batch.
`className`	Add a class for your container styling.
`client`	Use a client returned by `createGifSnapClient` with your configuration.

Use the media in your app

The picker handles selection; your app decides how to attach, send, or save it. Use url unchanged for the selected media and preview_url for a preview. URLs may point to external storage, and the returned format may be WebP or another supported image format.

Reserve media space with width and height, provide fallback alt text for an empty title, and handle an image that becomes unavailable. Keep source metadata when storing a selection.

The package’s code license covers the SDK. It does not replace the terms or rights applicable to returned media.

Need custom search controls? Use the JavaScript client and build your own interface.