https://github.com/lxsmnsyc/solid-giphy

SolidJS bindings for GIPHY Web SDK
https://github.com/lxsmnsyc/solid-giphy

Last synced: 26 days ago
JSON representation

SolidJS bindings for GIPHY Web SDK

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-giphy
• Owner: lxsmnsyc
• License: mit
• Created: 2021-10-21T03:26:11.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-25T03:10:34.000Z (over 3 years ago)
• Last Synced: 2025-03-29T07:51:28.895Z (about 2 months ago)
• Language: TypeScript
• Size: 836 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Giphy

README

        
# solid-giphy

> SolidJS bindings for [giphy](https://developers.giphy.com/docs/sdk#web)

[![NPM](https://img.shields.io/npm/v/solid-giphy.svg)](https://www.npmjs.com/package/solid-giphy) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-giphy/tree/main/examples/simple-example)

## Install

```bash

yarn add solid-giphy

```

## Usage

```jsx

import { createGiphyGrid, giphyGrid } from 'solid-giphy';

const gf = new GiphyFetch('your Web SDK key')

// With directives

function App() {

  return (

    


  );

}


// 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 
;

}

```


Read more on [`@giphy/js-components`](https://github.com/Giphy/giphy-js/tree/master/packages/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](https://github.com/lxsmnsyc)