giphy-ish
Giphy. Ish. Uses the Giphy search API to demonstrate infinite scroll, using the IntersectionObserver
API.
Running it
Important
In order to use the giphy API, you will need an API key, which can be obtained here.
Once you have a key, simply put it in .env.local
at the project root, like so:
REACT_APP_API_KEY=<api_key>
Clone the repository.
$ git clone https://github.com/babangsund/giphy-ish
Install dependencies
$ npm/yarn install
Run it
$ npm/yarn start
Details
Dependencies
This project was bootstrapped with create react app. Additional dependencies have been installed:
Prettier
: Code formatting.Typescript
: Static type checker, etc.Styled-components
: Locally scoped css components.React-testing-library
: React DOM testing utility.
Directories
components
: General components and scaffolding.Spinner
,Search
,List
,Item
giphy
: Gateway between the Giphy API, and this application.GiphyCache
: Singleton response cache with a 3 minutettl
.useGiphy
: Hook that wraps aGiphyClient
instance in relevant state.GiphyClient
: ImplementsfetchQuery
andfetchMore
to fetch and normalize paginated data.
icons
: A "collection" of svg icons.search.svg
: There's currently just the one. :^)
providers
: All app context providers.StyleProvider
: Provides thestyled-components
theme, along with global styling and a set of theme functions.
utils
: General utility functions.datetime
: exportsformatRelative
.types
: exportstype Ref
, which is just a common shorthand for{ current: ?HTMLElement }
.hooks
: General purpose hooks.useBool
: JustuseState
with booleans. Returns[bool, setTrue, setFalse]
.useInfiniteScroll
: A simple implementation ofIntersectionObserver
. Takes a ref, and a callback.
Credits
giphy-ish is built and maintained by babangsund.
@blog.
@github.
@twitter.