Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/readme updates #435

Merged
merged 3 commits into from
Mar 18, 2024
Merged

Feat/readme updates #435

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5620ba
Updated readmes to add information about pingbacks
Feb 20, 2024
eef27e2
Updated svelte docs and changeset:
Feb 20, 2024
0c17463
Simplified readme text
Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/mean-stingrays-grow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@giphy/svelte-components': minor
'@giphy/react-components': minor
'@giphy/js-components': minor
---

Readme updates for react, js, and svelte components to provide information re: pingbacks
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ Choose your flavor!

## _Now go build something!_

## A note about pingbacks

This SDK sends analytics events back to GIPHY in the form of pingbacks to help us improve the quality of search results for your users. You may want to consider advising your users of this in your app's privacy policy.

![Go do it](https://giphy.com/static/img/sdk/cat.gif)

## GIPHY-JS Developer Section
Expand Down
26 changes: 15 additions & 11 deletions packages/components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ A lightweight set of components, focused on ease-of-use and performance.

[![Edit @giphy/js-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1wq52x1w44?fontsize=14)

## A note about pingbacks

This SDK sends analytics events back to GIPHY in the form of pingbacks to help us improve the quality of search results for your users. You may want to consider advising your users of this in your app's privacy policy.

## Grid

Use `renderGrid(props, target)` to render a grid to a target element
Expand Down Expand Up @@ -91,16 +95,16 @@ grid.remove()

_renderCarousel options_

| property | type | default | description |
| --------------------------------------- | ---------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
| gifHeight | `number` | undefined | The height of the gifs and the carousel |
| gifWidth | `number` | undefined | The width of the gifs and the carousel (you may want to set Gif.imgClassName to have object-fit: cover to avoid stretching) |
| fetchGifs | `(offset:number) => Promise<GifsResult>` | undefined | A function that returns a Promise<GifsResult>. Use `@giphy/js-fetch-api` |
| gutter | `number` | 6 | The space between columns and rows |
| noResultsMessage | `string \| element` | undefined | Customise the "No results" message |
| [hideAttribution](#attribution-overlay) | `boolean` | false | Hide the user attribution that appears over a |
| noLink | `boolean` | false | Use a `div` instead of an `a` tag for the Gif component, user defines functionality with `onGifClick` |
| [Gif Events](#gif-events) | \* | \* | see below |
| property | type | default | description |
| --------------------------------------- | ---------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
| gifHeight | `number` | undefined | The height of the gifs and the carousel |
| gifWidth | `number` | undefined | The width of the gifs and the carousel (you may want to set Gif.imgClassName to have object-fit: cover to avoid stretching) |
| fetchGifs | `(offset:number) => Promise<GifsResult>` | undefined | A function that returns a Promise<GifsResult>. Use `@giphy/js-fetch-api` |
| gutter | `number` | 6 | The space between columns and rows |
| noResultsMessage | `string \| element` | undefined | Customise the "No results" message |
| [hideAttribution](#attribution-overlay) | `boolean` | false | Hide the user attribution that appears over a |
| noLink | `boolean` | false | Use a `div` instead of an `a` tag for the Gif component, user defines functionality with `onGifClick` |
| [Gif Events](#gif-events) | \* | \* | see below |

```typescript
import { renderCarousel } from '@giphy/js-components'
Expand Down Expand Up @@ -206,4 +210,4 @@ If a GIF has an associated user, an overlay with their avatar and display name w

```

To stop fonts from loading set the environment variable `GIPHY_SDK_NO_FONTS=true`, this is not recommended as it could cause inconsistencies in the ui components
To stop fonts from loading set the environment variable `GIPHY_SDK_NO_FONTS=true`, this is not recommended as it could cause inconsistencies in the ui components
4 changes: 4 additions & 0 deletions packages/react-components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ The GIPHY React SDK lets you and your users easily access the world’s largest

To try out it out before integrating, click on the code sandbox below. You may have also seen it in action on Google Chrome extention or Facebook Messenger bot.

## A note about pingbacks

This SDK sends analytics events back to GIPHY in the form of pingbacks to help us improve the quality of search results for your users. You may want to consider advising your users of this in your app's privacy policy.

### If React isn’t right for you, check out our other SDK repos that may be a better fit:

- [GIPHY JS SDK](https://github.com/Giphy/giphy-js/blob/master/packages/components/README.md)
Expand Down
5 changes: 5 additions & 0 deletions packages/svelte-components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

# @giphy/svelte-components

Try it out on [Codesandbox](https://codesandbox.io/p/sandbox/mystifying-architecture-xhsthm?file=%2Fsrc%2Froutes%2F%2Bpage.svelte%3A10%2C36)
Expand All @@ -6,6 +7,10 @@ This package provides components that help you display gifs on a website. It wor

There are three main components: Gif, Grid, and Carousel described below. Feel free to poke around the `src/routes` dir for working examples

## A note about pingbacks

This SDK sends analytics events back to GIPHY in the form of pingbacks to help us improve the quality of search results for your users. You may want to consider advising your users of this in your app's privacy policy.

## Gif

```svelte
Expand Down
Loading