vue-gif-search
v1.0.1
Published
A simple component to search gifs in vue with Giphy and get the url
Downloads
150
Maintainers
Readme
A simple component to search gifs in vue with Giphy and get the url
Install 📦
npm i vue-gif-search
How to use 📝
import gifSearch from "vue-gif-search";
Emited :arrow_up:
Once you clicked on one result, the component will emit the url, you will need to catch it
Example
<template>
<gifSearch apiKey="YourAPIKey" @clicked="onClickGIF" />
</template>
<script>
import gifSearch from "vue-gif-search";
export default {
components: {
gifSearch
},
data() {
return{
url: "";
}
},
methods: {
onClickGIF (value) {
this.url = value;
console.log(this.url)
}
}
};
</script>
Props 🗃
| Name | Type | Default | Description | | ------------------ | ------- | --------------------------------------------------- | ---------------------------------------------------------------------- | | apiKey | Array | - | Giphy API Key, only required value | | height | Number | 256 | Gif preview height | | width | Number | 256 | Gif preview width | | searchBar | Boolean | true | Show/hide searchBar | | imgStyle | String | "padding-top: 10px;margin: 0 10px; cursor: pointer" | CSS style for gif previews | | row | Boolean | true | Show previews as Row or Column | | placeholder | String | "Gif search..." | Input placeholder text | | searchButtonText | String | "Go!" | Search Button text | | resultNumbers | Number | 15 | Amount of gif previews (More than 15 could cause performance problems) | | clearSearchBar | Boolean | True | Should search bar be cleared once image are searched | | clearResultOnClick | Boolean | True | Should result be cleared once you clicked one of them |
Show your support ✨
Give a ⭐️ if this project helped you!
Author 👷
Daniel Villalobos [email protected]