Merge pull request #435 from Giphy/feat/readme-updates

Feat/readme updates
Giphy · Mar 18, 2024 · 920cd4e · 920cd4e
2 parents ea4dea7 + 0c17463
commit 920cd4e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 11 deletions.
diff --git a/.changeset/mean-stingrays-grow.md b/.changeset/mean-stingrays-grow.md
@@ -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
diff --git a/README.md b/README.md
@@ -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.
+
 ![Go do it](https://giphy.com/static/img/sdk/cat.gif)
 
 ## GIPHY-JS Developer Section

diff --git a/packages/components/README.md b/packages/components/README.md
@@ -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.
+
 ## Grid
 
 Use `renderGrid(props, target)` to render a grid to a target element
@@ -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'
@@ -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
diff --git a/packages/react-components/README.md b/packages/react-components/README.md
@@ -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.
+
 ### 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)

diff --git a/packages/svelte-components/README.md b/packages/svelte-components/README.md
@@ -6,6 +6,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.
+
 ## Gif
 
 ```svelte