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