Feature Request - Search Text

[rushilshah1]

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!

[sergiop]

Hi @rushilshah1, what's the purpose of managing the search text via prop instead of letting the user set it through the input field? Do you need to set a default query on component initialization?

[rushilshah1]

@sergiop - It is more for accessing the user query outside of the react-giphy-searchbox component. Similar to the onSelect callback which returns a Gif object, if that or some other prop could return the search query it can be used/displayed outside of the react-giphy-searchbox component.

[sergiop]

@rushilshah1 ah... ok! I've completely misunderstood your request, sorry. 🙂 Nice idea, we can call it onSearch and it will receive the searched text as a parameter, like this.

onSearch={
  text => console.log('Searched text', text)
}

What do you think?

[rushilshah1]

@sergiop sounds good to me! Thank you 😄

[sergiop]

@rushilshah1 I just added the feature in this PR, it was pretty simple. Please feel free to give it a try leaving your feedback. In the meantime maybe I can write some tests to run inside the CI.

[rushilshah1]

@sergiop Appreciate the quick turnaround! What would be the easiest way for me to try it out since it is not a new package version on npm just yet?

[sergiop]

To test:

Way 1: you can fork or simply clone this repo, check out the feature/on-search-callback branch, run yarn install and yarn start. Once the project is running, you can open the demo page on http://localhost:3000/, adding the new callback on demo/src/index.js.

Way 2 (maybe simpler): if you have already installed this library on a project, change your package.json from this:

"dependencies": {
  "react-giphy-searchbox": "^1.3.0"
}

to this:

"dependencies": {
  "react-giphy-searchbox": "git+ssh://git@github.com:sergiop/react-giphy-searchbox.git#62ad4e4"
}

(where #62ad4e4 is the hash related to the changes I just made) and run yarn install or npm install.

Otherwise, if you can wait a couple of days, I'll release the feature! 😉

[sergiop]

@rushilshah1 just released with version 1.4.0. 😉

[rushilshah1]

wohoo! Thanks @sergiop!