Merge pull request #428 from Giphy/react-components/use-client

use client in react components

.changeset/soft-timers-wave.md

@@ -0,0 +1,5 @@
+---
+'@giphy/react-components': patch
+---
+
+add 'use client' in react components so they can be used in Next.js App Router more easily

packages/react-components/src/components/attribution/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { IGif, IProfileUser } from '@giphy/js-types'
 import React from 'react'
 import styled from 'styled-components'

packages/react-components/src/components/attribution/overlay.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { IGif } from '@giphy/js-types'
 import React, { useRef } from 'react'
 import styled from 'styled-components'

packages/react-components/src/components/carousel.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { gifPaginator, GifsResult } from '@giphy/js-fetch-api'
 import { IGif, IUser } from '@giphy/js-types'
 import { getGifWidth } from '@giphy/js-util'

packages/react-components/src/components/emoji-variations-list.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { giphyCharcoal, giphyDarkGrey } from '@giphy/colors'
 import type { NonPaginatedGifsResult } from '@giphy/js-fetch-api'
 import type { GifID, IGif, IUser } from '@giphy/js-types'

packages/react-components/src/components/gif.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import { IGif, IUser, ImageAllTypes } from '@giphy/js-types'
 import { Logger, getAltText, getBestRendition, getGifHeight } from '@giphy/js-util'

packages/react-components/src/components/grid.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { gifPaginator, GifsResult } from '@giphy/js-fetch-api'
 import { IGif, IUser } from '@giphy/js-types'
 import { getGifHeight } from '@giphy/js-util'

packages/react-components/src/components/loader.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import React from 'react'
 import styled, { keyframes } from 'styled-components'

packages/react-components/src/components/search-bar/context.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { giphyBlack, giphyCharcoal, giphyWhite } from '@giphy/colors'
 import { GifsResult, GiphyFetch, Result, SearchOptions, request } from '@giphy/js-fetch-api'
 import { IChannel } from '@giphy/js-types'

packages/react-components/src/components/search-bar/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { giphyIndigo, giphyLightGrey } from '@giphy/colors'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import useDebounce from 'react-use/lib/useDebounce'

packages/react-components/src/components/search-bar/suggestion-bar/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { useContext } from 'react'
 import styled from 'styled-components'
 import { CssVars, SearchContext } from '../context'

packages/react-components/src/components/video/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { getGifHeight, Logger } from '@giphy/js-util'
 import React, { ComponentProps, ElementType, useCallback, useEffect, useState } from 'react'
 import useTimeoutFn from 'react-use/lib/useTimeoutFn'

packages/react-components/src/components/video/video-overlay.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { GifOverlayProps } from '../types'