solid-giphy v0.1.3

solid-giphy

SolidJS bindings for giphy

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