🖼️ 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}}.
buildUrl
function with your options
and fetch however you see fit.
isomorphic-unfetch
).
react-instafeed
which wraps this for react
.
🚨️ You do not need this. 🚨️
⚠️ This is a direct port frominstafeed-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.
Further Documentation
🙌 Props
Super props to the Instafeed, Instagram, and React teams.
❤️ "Legal"
This software is provided as-is, and all that usually lovely stuff.