solid-giphy

SolidJS bindings for the GIPHY SDK

Usage no npm install needed!

<script type="module">
  import solidGiphy from 'https://cdn.skypack.dev/solid-giphy';
</script>

README

solid-giphy

SolidJS bindings for giphy

NPM JavaScript Style GuideOpen in CodeSandbox

Install

yarn add solid-giphy

Usage

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.

Utilities

  • useGiphyGrid/createGiphyGrid
  • useGiphyCarousel/createGiphyCarousel
  • useGiphyGif/createGiphyGif
  • useGiphyVideo/createGiphyVideo

Directives

  • giphyGrid
  • giphyCarousel
  • giphyGif
  • giphyVideo

License

MIT © lxsmnsyc