Instagram Feed - How to display your last X Insta Image

I recently created an Insta-Feed in my Frontity project, and I’m happy to share my solution.
I am a beginner with JS and React, so feel free to improve it and share your opinion.
As Instagram API seemed too complicated for me, and I did not find a simple solution to communicate with it, I used Zapier RSS feed instead. You can set up a Zap-Insta-feed, as described here.
I use react-fetch-hook to get my Feed.
So first, install react-fetch-hook:

npm i react-fetch-hook --save

And my <Instagram/> component looks like:

import React from 'react';
import useFetch from "react-fetch-hook";
import Image from '@frontity/components/image';
import Link from './link';

const Instagram = () => {
  var instaObjects = [];
  const { isLoading, data } = useFetch(
      formatter: response => response.text()

  if (data){
    let instaObjects = [];
    const items = data.match(/<item>(.|\n)*?<\/item>/g).map(function(val) {
      return val.replace(/<\/?b>/g, "");
    });, index) => {
      const title = /<title>(.|\n)*?<\/title>/.exec(item);
      const link = /<link>(.*?)<\/link>/.exec(item);
      const enclosure = /<enclosure (.*?)<\/enclosure>/.exec(item);
      const image = enclosure[1].match(/"((?:\\.|[^"\\])*)"/);
      const encodedImage = image[1].replace(/&amp;/g, "&");

        title: title[1],
        link: link[1],
        image: encodedImage,
    return (
        {{ title, link, image }, index) => {
          return (
            <Link key={index} link={link}>
              <Image src={image} alt={title} objectFit="cover" />
 return "Loading";
export default Instagram;

I hope it helps some of you! :slight_smile:


Nice work @koli14! :slightly_smiling_face:

Just a quick feedback: you can use a hook for fetch like for example react-fetch-hook, because, in contrast to axios, fetch is included in the browser.

Bundlephobia is a great way to quickly check the size of an npm package.

Thanks for the feedback!
I edited my code and my original post, using now react-fetch-hook! :slight_smile:

Thanks a lot for your contribution @koli14!

@Reyes take a look, I think this could go on our next newsletter :blush:

1 Like

I have an ReferenceError: DOMParser is not defined at the moment if not running on Localhost but Zeit, but it will be fixed in hours…:stuck_out_tongue: @luisherranz do you have a Parser suggestion?

That was quick :slight_smile:

Where are you using the DOMParser? It’s not in the react-fetch-hook for what I can see, right?(

With axios I could do the following:

const doc = response.request.responseXML;
const items = doc.getElementsByTagName('item');

But I could not do the same with react-fetch. It does have a Custom formatter, but I have no idea how to use it. In the docs it mentions a JSON formatter, and a text. My RSS feed gives back XML. So i choose text, and try to parse it with a parser.
First I did it like:

const parser = new DOMParser();
const doc = parser.parseFromString(data, "text/xml");
const items = doc.getElementsByTagName('item');

But it does not work on Zeit, only on localhost.

I edited my original post again, now I use Regexp to parse the XML string returned by react-fetch. I’m not a big regexp master, I hope it will be stable. Now it’s working.

Awesome :smile:

Wow, is the Instagram API still using XML instead of JSON?? :open_mouth:

No. I do not get the Insta Posts from Instagram but through Zapier RSS feed. Insta API was too complicated for me, and I did not find an easy-to-use and well-documented npm package for it.

Interesting, thanks.

Remember that a lot of times you can find an npm package that makes your life easier. For example, in this case, you could use something like this instead of regexps.

The only thing you need to make sure is that packages are small enough for client-side usage. A lot of times two package that can look alike can weight a lot more:

Thanks @luisherranz. Sadly is not working correctly. I created an issue about:
Yes, I also checked a lot of xml parser, but I did not found a working one, which was smaller then axios (which includes it).

Well yes, sadly sometimes that happens :laughing:

It’s just weird to see an XML API nowadays but no problem if it works :slight_smile:

I would be also happier if I could get back JSON. It’s definietly not the best solution, but I hope the community will find a better solution soon.

1 Like