kendaleiv/giphy-search-component

giphy-search-component

An embeddable GIPHY image search component.

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