🖼️ react-instafeed

A dead simple way to get data from Instagram (inspired by Instafeed.js)

An Instagram friendly API URL and/or the data it returns. No {{templating}}.

🎁️ My suggestion is to use the buildUrl function with your options and fetch however you see fit.

😑️ If you do not want to do that, then you can use the default in this package (isomorphic-unfetch).

🤷️ And if you really don't want to do anything with the code, feel free to use react-instafeed which wraps this for react.

🚨️ You do not need this. 🚨️

⚠️ This is a direct port from instafeed-lite at the moment ⚠️

If you want assistance in creating the API URL you can use instafeed-lite.

The templating that this had should be handled by you after you grab your data.

I do not use this repo, but I did not want to delete it as other people do.

🚨️ Instagram is shutting down its current API in 2020. 🚨️

Read more here. Instagram Graph API is their new solution, which right now only is enabled for Business Accounts.

Support for Non-Business Profiles [FUTURE]: Basic permissioning for non-business profiles will be supported in early 2019.

Currently we are still using the v1 endpoints. (No real plan to move to Graph until Non-Business Profiles are ready.)

👩‍💻️ Install:

yarn add react-instafeed

Render

Options:

const options = {
  accessToken: 'access...',
  clientId: 'client...',
  get: 'user', // popular, user
  locationId: null,
  resolution: 'standard_resolution', // thumbnail, low_resolution, standard_resolution
  sortBy: 'none', // none, least-commented, least-liked, least-recent, most-commented, most-liked, most-recent, random
  tagName: null,
  userId: 123,
}

REACT:

import React, { Fragment } from 'react'
import { buildUrl } from 'react-instafeed'

// 🔥️ These are in your code (not this repo)
import useAbortableFetch from '@hooks/useAbortableFetch'
import Image from '@components/Image'

const Instagram = () => {
  const { json, loading, error, abort } = useAbortableFetch(buildUrl(options))
  if (loading) return 'Loading...'
  if (error) return `Error: ${error}`
  if (!json) return null

  const { data, meta, pagination } = json

  return (
    <Fragment>
      {// eslint-disable-next-line no-unused-vars
      data &&
        data.map(({ caption, id, images, tags }, index) => {
          const image = images[options.resolution]
          return (
              <Image
                key={index}
                url={image.url}
                title={caption.text}
                caption={caption.text}
                width={image.width}
                height={image.height}
              />
            </div>
          )
        })}
    </Fragment>
  )
}

URL:

import { buildUrl } from 'react-instafeed'

const instagramUrl = buildUrl(options)

Data:

import instafeed from 'react-instafeed'

const data = instafeed(options)

📓️ Notes:

Again, just use buildUrl and handle your own loading.

Variables

limit - Maximum number of Images to add. (max: 60)
resolution - Size of the images to get. Available options are:
- low_resolution - 320x320
- standard_resolution - 640x640
- thumbnail (default) - 150x150
sortBy - Sort the images in a set order. Available options are:
- least-commented - Lowest # of comments to highest.
- least-liked - Lowest # likes to highest.
- least-recent - Oldest to newest.
- most-commented - Highest # of comments to lowest.
- most-liked - Highest # of likes to lowest.
- most-recent - Newest to oldest.
- none (default) - As they come from Instagram.
- random - Random order.

JeromeFitz / react-instafeed

readme