diff --git a/.changeset/mean-stingrays-grow.md b/.changeset/mean-stingrays-grow.md new file mode 100644 index 00000000..fdaa9a76 --- /dev/null +++ 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 index c0d77b04..b23d3d2e 100644 --- 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 index 785ee7db..adb36bdb 100644 --- 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` | undefined | A function that returns a Promise. 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` | undefined | A function that returns a Promise. 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 index 5eb03a26..97167b2c 100644 --- 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 index 3f76edde..bf011beb 100644 --- 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