1.0.1 • Published 4 years ago

vue-gif-search v1.0.1

Weekly downloads
6
License
-
Repository
github
Last release
4 years ago

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 🗃

NameTypeDefaultDescription
apiKeyArray-Giphy API Key, only required value
heightNumber256Gif preview height
widthNumber256Gif preview width
searchBarBooleantrueShow/hide searchBar
imgStyleString"padding-top: 10px;margin: 0 10px; cursor: pointer"CSS style for gif previews
rowBooleantrueShow previews as Row or Column
placeholderString"Gif search..."Input placeholder text
searchButtonTextString"Go!"Search Button text
resultNumbersNumber15Amount of gif previews (More than 15 could cause performance problems)
clearSearchBarBooleanTrueShould search bar be cleared once image are searched
clearResultOnClickBooleanTrueShould result be cleared once you clicked one of them

Show your support ✨

Give a ⭐️ if this project helped you!

Author 👷

Daniel Villalobos daniel.villalobosdel@gmail.com

1.0.1

4 years ago

1.0.0

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago