svelte-tenor

Tenor GIF components, implemented in Svelte.

Try svelte-tenor

Try svelte-tenor here!

The all-in-one GIF keyboard

Install svelte-tenor with your favorite package manager:

npm install svelte-tenor
# or
yarn add svelte-tenor

Use the MobileKeyboard component:

<script>
  import { MobileKeyboard, Gif } from 'svelte-tenor'

  let gif
</script>

<MobileKeyboard
  key="Get a key for free here: https://tenor.com/developer/keyregistration"
  on:click={({ detail }) => {
    gif = detail
  }}
/>

{#if gif !== undefined}
  <p><Gif {gif} /></p>
  <pre>{JSON.stringify(gif, null, 2)}</pre>
{/if}

Open this example in your browser

Component list

If you want to build your own GIF keyboard, svelte-tenor contains a lot of components.

Autocomplete: offers to finish your sentence

Categories: Tenor GIF categories

Search: asks Tenor for matching GIFs

And more! Try all available components: https://gauben.github.io/svelte-tenor/storybook/

Build your own keyboard

While MobileKeyboard might be enough for prototyping, you probably want to create a GIF keyboard with more features and a better design. To help you do so, svelte-tenor contains a handful of composable components.

If you don't know how or where to begin, you may read the source code of MobileKeyboard.

Typed API

All the components above use Tenor API. The API client implementation is written in TypeScript and fully typed. You can use it as follows:

import { search } from 'svelte-tenor/api'

console.log(await search({ key: 'LIVDSRZULELA', q: 'hello' }))

Open this example in your browser

The API runs smoothly in the browser and deno, but requires a workaround in node:

// https://www.npmjs.com/package/node-fetch
import fetch from 'node-fetch'
Object.defineProperties(globalThis, {
  fetch: { enumerable: true, configurable: true, value: fetch },
})

Please note that the API implemented does not completely follow Tenor's documentation. If you want a faithful API implementation, use svelte-tenor/raw-api instead.

How to contribute?

Install Node and Yarn with Volta. Once you've cloned the project and installed dependencies with yarn install, start a development server:

# Start Storybook
yarn storybook

# Format code with prettier
yarn format

# Run code quality checks
yarn check

# Commit your changes!
git commit -a

If everything works, please open a pull request with your changes and a short description. Thanks for considering contributing!

License

MIT