Giphy-search-component NPM

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>

<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'`