sergiop/react-giphy-searchbox

Responsive and customizable search and select for Giphy's GIFs and Stickers.

react-giphy-searchbox's Issues

Uncaught ReferenceError: module is not defined

The component have a dependency to webpack module.hot, if you try to use it with vite, it fails with error

Uncaught ReferenceError: module is not defined

if (module.hot) { module.hot.dispose(function () { styles.forEach(function (style) { if (document.head.contains(style)) { document.head.removeChild(style); } }); styles.clear(); }); }

Don't nest search input in form

Love the component!

But I'd suggest taking out form as I had trouble earlier today where this giphy component was already inside a form and that caused the page to reload everytime I pressed enter in the search box. (if form is not doing anything major ofc, then we can take it out).

Specify a hundred percent width to the component

Hi,

I was trying to build myself a giphy component like you did in React. So first, thanks.
But I had also a question. I can't figure out where I can specify a hundred percent container width since that sounds like the very first step to a responsive component for me.

Can you help me please ?

Thanks in advance.
Sourouche

[Bug] Cannot read property 'total_count' of undefined

There is an intermittent error when using the searchbox, causing the entire screen to go blank. I am using version 1.4.0 and have pasted the console error below.

Error: 2.99bc40a8.chunk.js:1 TypeError: Cannot read property 'total_count' of undefined
at M (2.99bc40a8.chunk.js:1)
at Object.Jo [as useReducer] (2.99bc40a8.chunk.js:1)
at t.useReducer (2.99bc40a8.chunk.js:1)
at C (2.99bc40a8.chunk.js:1)
at L (2.99bc40a8.chunk.js:1)
at $o (2.99bc40a8.chunk.js:1)
at Pa (2.99bc40a8.chunk.js:1)
at mu (2.99bc40a8.chunk.js:1)
at cs (2.99bc40a8.chunk.js:1)
at us (2.99bc40a8.chunk.js:1)

CSS Modules cannot be imported from within node_modules

I'm using react-giphy-searchbox with Next.js and Typescript. After installing the lib, the following error is appearing on the screen.

After investigating, I came to know that lib is consuming the package source directly, instead of the built package. Don't know how to resolve this issue. Can you please publish a compiled version of this dependency?

Update npm package with last fix

This last commit that fixed the module.hot dependency should be pushed to npm and a new path/minor version

#64

Production API Key

Hi,

First of all, thanks for this library, I'm using it on my retrospective tool (https://github.com/antoinejaussoin/retro-board/tree/v3) and it works like a charm.

I have a question though: how do you get a production API key? Following Giphy's doc, you need to get some giphyRandomId variable that should be set to the window object, which is not the case when using your component. How did you manage to solve this issue?

Many thanks!

README.md: project logo broken on npmjs.com

Move the location of the logo outside github files to be reachable from npmjs.com

Wrong class names in build (Css Module).

class="node_modules-react-giphy-searchbox-es-__index-module___componentWrapper "

Class names in production have a strange name instead of the 5 digits base64 hash as configured here, and they are missing the hash:
https://github.com/sergiop/react-giphy-searchbox/blob/master/nwb.config.js#L23

I need to investigare to find the source of the issue, aniway... since the names are so long and complex it's improbable to have a conflict with some other class names in the parent projects.

Duplicate component keys

While scrolling in the box, I have this error of duplicate keys:

Warning: Encountered two children with the same key, `3o7aD0Xi3CU1GWNgM8`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Here is my code:

<ReactGiphySearchbox
	apiKey="_API_KEY_"
	library="gifs"
	onSelect={(item: any) => console.log(item)}
/>

It's the most basic code.

How to make the component fully responsive with screen size

Hi,

First of all amazing library and so easy to use in React projects. I was wondering if there's a way to set the width of the container and images in % so that the whole component will be fully responsive. I tried setting % width in masonryConfig but it doesn't work.

Please look at the screenshot for reference. Notice the empty area on the sides, it'd look great if there was a way to cover it.

In the other image when screen width is smaller, the component overflows outside of area.

Feature Request - Search Text

Add prop that allows for the user search entry to be retrieved. Example searchText prop that would bind a variable to the search text input or can be retrieved via a callback function like onChange. I would love to use this tool but this seems to be the only missing feature that I would need!

Add typescript types

Since this is typed using flow, you could create a typescript branch and use flow-to-ts then merge back to the main branch so that it has support for both languages

Module parse failed: Unexpected character '�' during yarn build

yarn add react-giphy-searchbox --save

yarn build
... output truncated ...
ERROR in /home/caleb/Documents/fifteen5/node_modules/react-giphy-searchbox/es/assets/poweredByGiphy.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ /home/caleb/Documents/fifteen5/node_modules/react-giphy-searchbox/es/index.js 15:0-63 159:23-43
 @ ./components/GifSelector/GifDropdown.tsx
 @ ./components/GifSelector/GifButton.tsx
 @ ./high_fives/src/HighFive.tsx
 @ ./onboarding/src/steps/HighFiveStep/HighFiveStep.tsx
 @ ./onboarding/src/steps/index.tsx
 @ ./onboarding/src/OnboardingRoot.tsx
 @ ./onboarding/src/index.tsx
error Command failed with exit code 2.

add_gif_selector ✗ $ yarn --version                                                                                                                                            1 ↵
1.22.5
(fifteen5) caleb@caleb-H110M-A:~/Documents/fifteen5 
add_gif_selector ✗ $ node --version
'Tipz:' nodejs --version
v12.18.1

We use webpack to build our react app.

Create a demo page and publish it on ghpages.

...and write script to automate the process.

Autofocus the searchbox prop

Request: add prop to autofocus the select box on mount

Outdated react peer dependencies cause issues

The package uses React 16 as a peerDependency, which causes conflicts when importing the library into newer projects using React 18.

Please update to allow usage of newer versions of React.

Complete unit tests on components.

Create unit tests for the following components:

• src/index (the main one)
• src/components/Alert
• src/components/ImageItem
• src/components/MasonryLayout
• src/components/PoweredByGiphy
• src/components/SearchForm
• src/components/Spinner

Create detailed instrunction on how to contribute to the project.

As the title suggests...

Usage in existing form component

Hi! Thank you for creating this package. It works really well. However, I'm facing an error while using this inside an existing <form> tag.

Is there any way to get around this ?

Attribution & Giphy Guidelines

Hi!

Thanks for your amazing component, which I'm using on retrospected.com.

I've just received an email from Giphy, stating that the component doesn't comply to the Attribution Policy:

Looking at their website (https://developers.giphy.com/docs/sdk/#design-guidelines), it looks like the component needs to somehow display the image creator's handle/username and perhaps a link to see more from them:

My question is: is that something you are planning to work on at some point?

Thanks!

sped up / blurry gif?

I tried the codesandbox and noticed that the gifs displayed are blurry and sped up from the normal speed.

For example, search for "high five" and look at the liz lemon gif:

It is a downgraded version of the actual gif:

Is there some setting that would need to be set to use the higher-quality version? Or maybe the lower quality version is just because of the API key used?

Remove Axios.

Remove Axios to decrease external dependencies.

Package not installing

I tried implementing it on my project, but while trying to install it, it'll be returning alot of error, stating that it's depencies are deprecated, i even tried using npm i react-giphy-searchbox --legacy-peer-deps but yet, it installed but due to the dependencies being out of date, it crashed my entire project, i had to uninstall it again, please fix it, thank you.