SolidJS bindings for giphy
yarn add solid-giphy
import { createGiphyGrid, giphyGrid } from 'solid-giphy';
const gf = new GiphyFetch('your Web SDK key')
// With directives
function App() {
return (
<div
use:giphyGrid={{
fetchGifs(offset: number) {
return gf.trending({ offset, limit: 25 });
},
width: GRID_WIDTH,
column: 3,
gutter: 6,
}}
/>
);
}
// With utility
function App() {
const [ref, setRef] = createSignal();
createGiphyGrid(ref, {
fetchGifs(offset: number) {
return gf.trending({ offset, limit: 25 });
},
width: GRID_WIDTH,
column: 3,
gutter: 6,
});
return <div ref={setRef} />;
}
Read more on @giphy/js-components
. APIs are based from @giphy/js-components
with minor changes.
useGiphyGrid
/createGiphyGrid
useGiphyCarousel
/createGiphyCarousel
useGiphyGif
/createGiphyGif
useGiphyVideo
/createGiphyVideo
giphyGrid
giphyCarousel
giphyGif
giphyVideo
MIT © lxsmnsyc