giphy-search-component

0.0.8 • Public • Published

giphy-search-component

An embeddable GIPHY image search component.

npm Travis

Try out a demo!

Note: This is a demo associated with my "Creating and Distributing Custom Web Components" talk. Items like linting and tests are not included, simplifying the repository.

Installation

npm install giphy-search-component

Or, load this script manually: https://unpkg.com/giphy-search-component@latest/dist/giphy-search-component.min.js -- This targets the latest version, which may include breaking changes for major version updates. A specific version can be targeted to avoid potential breaking changes. See https://unpkg.com for more information.

Usage

<app-giphy-search api-key="API_KEY_HERE"></app-giphy-search>

or

<div data-app-giphy-search api-key="API_KEY_HERE"></div>

For frameworks with templates, like Vue.js, use raw HTML in the template and call new GiphySearchComponent().start(); at the appropriate point in the framework lifecycle.

See /samples for examples.

Attributes

Name (bold if required) Description Default Value
api-key The API key to connect to GIPHY, see https://developers.giphy.com
embed-height The height of the embeddable component '500px'
embed-width The width of the embeddable component '800px'

Events

Event Description
GiphySearchComponent:Searching Invoked when a search has started.
GiphySearchComponent:Searched Invoked when a search has completed.

Development

  • npm install
  • npm start

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i giphy-search-component

Weekly Downloads

2

Version

0.0.8

License

MIT

Unpacked Size

21.7 kB

Total Files

4

Last publish

Collaborators

  • kendaleiv