!Built With Stencil

Giphy Search Web Component

This web component searches and shows animated Gif's from the GIPHY public API in an infinite scroll container.

The usage of Stenciljs for generating the Web Component brings the possibility of, instead of only an stand-alone application, to use it also as a widget in any website/application. And it is IE11+ compatible! :D

It will load 10 Gif's at a time, incrementing the page every time the scroll reaches the bottom of the page. You can change the amount of gifs per page setting the property gif-per-page on the component.

Getting Started

To start building the Giphy Search component, clone this repo to a new directory:

``bash
git clone https://github.com/fabriciomendonca/giphy-search-webcomponent.git giphy-search-webcomponent
cd giphy-search-webcomponent
git remote rm origin
`

and run:

`bash
npm install
npm start
`

To build the component for production, run:

`bash
npm run build
`

To run the unit tests for the components, run:

`bash
npm test
`

Running the dev server

To run the development environtment, just run npm start after running npm install.

It will open the browser with HMR on port (default) 3333.

Usage

$3

Clone this repo.

`bash
git clone https://github.com/fabriciomendonca/giphy-search-webcomponent.git giphy-search-webcomponent
cd giphy-search-webcomponent
git remote rm origin
`

After building the project for production with npm run build, you can coppy the /dist folder to your server.

`HTML


`

$3

Install the Giphy Search Web Component as a dependency.

`bash
npm i -S giphy-search-web-component
`

####

For React apps, edit your index.js file

`javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// Add this line to import the component loader
import { defineCustomElements } from 'giphy-search-web-component/dist/loader';

ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

// Add this line to define the component on the window scope
defineCustomElements(window);
`

And use it as an HTML custom tag on your JSX files

`javascript
import React, { Component } from 'react';

class App extends Component {
render() {
return (


export default App;
`

See Stenciljs docs for integration with other frameworks and libraries at https://stenciljs.com/docs/overview

Next steps for this project

- Improve performance of the infinite scroll, rendering only a small set of the loaded pages and discarding elements that is too far away from what is being shown;
- Add more actions to the actions bar in the bottom of each gif, like copy link, share` and so on;
- Create option to show the list in a three columns per row way.

GIPHY API Docs

https://developers.giphy.com/docs/