https://github.com/gauben/svelte-tenor
A GIF keyboard, developed with Svelte
https://github.com/gauben/svelte-tenor
gif gifs keyboard svelte tenor
Last synced: 7 months ago
JSON representation
A GIF keyboard, developed with Svelte
- Host: GitHub
- URL: https://github.com/gauben/svelte-tenor
- Owner: GauBen
- License: mit
- Created: 2021-09-15T20:40:46.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-25T22:56:16.000Z (almost 2 years ago)
- Last Synced: 2025-03-17T22:41:56.045Z (7 months ago)
- Topics: gif, gifs, keyboard, svelte, tenor
- Language: Svelte
- Homepage: https://gauben.github.io/svelte-tenor/
- Size: 12.8 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# svelte-tenor
Tenor GIF components, implemented in Svelte.
[](https://github.com/GauBen/svelte-tenor/blob/main/CHANGELOG.md) [](https://www.npmjs.com/package/svelte-tenor) [](https://bundlephobia.com/package/svelte-tenor)
[](https://gauben.github.io/svelte-tenor/)
## Try svelte-tenor
[Try svelte-tenor here!](https://gauben.github.io/svelte-tenor/)
## The all-in-one GIF keyboard
Install `svelte-tenor` with your favorite package manager:
```bash
npm install svelte-tenor
# or
yarn add svelte-tenor
```
Use the `MobileKeyboard` component:
```svelte
import { MobileKeyboard, Gif } from 'svelte-tenor'
let gif
{
gif = detail
}}
/>
{#if gif !== undefined}
{JSON.stringify(gif, null, 2)}
{/if}
```
[
Open this example in your browser](https://svelte.dev/repl/1d2b32821c494e2dae9c8921ea2e2e77?version=3)
## Component list
If you want to build your own GIF keyboard, svelte-tenor contains a lot of components.
[**Autocomplete:**](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-autocomplete--autocomplete) offers to finish your sentence
[](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-autocomplete--autocomplete)
[**Categories:**](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-categories--categories) Tenor GIF categories
[](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-categories--categories)
[**Search:**](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-search--search) asks Tenor for matching GIFs
[](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-search--search)
**And more!** Try all available components: https://gauben.github.io/svelte-tenor/storybook/
## Build your own keyboard
While [MobileKeyboard](https://gauben.github.io/svelte-tenor/storybook/?path=/story/keyboards-mobilekeyboard--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](https://gauben.github.io/svelte-tenor/storybook/?path=/story/components-autocomplete--autocomplete).
If you don't know how or where to begin, you may read [the source code of MobileKeyboard](https://github.com/GauBen/svelte-tenor/blob/main/src/lib/MobileKeyboard.svelte).
## Typed API
All the components above use [Tenor API](https://tenor.com/gifapi/documentation). The API client implementation is written in TypeScript and fully typed. You can use it as follows:
```ts
import { search } from 'svelte-tenor/api'
console.log(await search({ key: 'LIVDSRZULELA', q: 'hello' }))
```
[Open this example in your browser](https://svelte.dev/repl/359c66c0d2ed473a965b5b6bb886cab0?version=3)
The API runs smoothly in the browser and deno, but **requires a workaround in node**:
```ts
// 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](https://tenor.com/gifapi/documentation). If you want a faithful API implementation, use `svelte-tenor/raw-api` instead.
## How to contribute?
Install Node and Yarn with [Volta](https://volta.sh/). Once you've cloned the project and installed dependencies with `yarn install`, start a development server:
```bash
# 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](https://github.com/GauBen/svelte-tenor/blob/main/LICENSE)