Reactagram

Reactagram is a render prop for fetching posts from your Instagram feed using the v1 Instagram API.

Usage Example

<Reactagram count={20} apiKey={'YOUR_INSTAGRAM_V1_API_KEY'}>
  {({ data: { posts }, loading, error, actions: { nextPage } }) => {
    if (loading) return <div>Loading</div>;
    if (error) return <div>Error</div>;
    return (
      <>
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            width: 900,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {posts.map(({ images: { low_resolution: { url } } }) => (
            <div
              key={url}
              style={{ height: 200, width: 200, overflow: 'hidden' }}
            >
              <img
                src={url}
                style={{ padding: 10, objectFit: 'cover' }}
                alt=""
              />
            </div>
          ))}
        </div>
        <button onClick={nextPage}>Next</button>
      </>
    );
  }}
</Reactagram>

Usage

Reactagram requires two props and a child function.

Props

count :number

The number of posts that will be fetched at a time (limits apply from the Instagram API)

apiKey :string

Your Instagram V1 API key or access token. Login in to Instagram and check the network tab requests to find it.

Child Function

The child function will be called with and object containing the following properties:

loading :boolean

A boolean indicating the component is awaiting the API response

error :string

Errors from the API requests

data :object

The response object from the API containing your posts (and some pagination info)

actions :object

An object containing helper functions

Actions

nextPage: () => void

Fetches the next page of posts from the API and updates the post array