Skip to content
Switch branches/tags


Quick start

  1. Install
npm install --save origen-react-instagram-feed


yarn add origen-react-instagram-feed
  1. Use it in a component

Quick recipe for use with Material-UI

// @flow

import * as React from 'react';
import withInstagramFeed from 'origen-react-instagram-feed';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import ButtonBase from '@material-ui/core/ButtonBase';
import compose from 'recompose/compose';

const styles = () => ({
  wrapper: {},
  image: {
    width: '100%',
    height: '100%',

export type Props = {
  media?: Array<{
    displayImage: string,
    id?: string,
    postLink?: string,
    accessibilityCaption?: string,
  account: string,
  classes: { [$Keys<$Call<typeof styles>>]: string },
  status: 'completed' | 'loading' | 'failed',

const InstaGrid = ({ classes, media, account, status}: Props) => {
  return (
    <Grid container spacing={32} className={classes.wrapper}>
      {media &&
        status === 'completed' &&{ displayImage, id, postLink, accessibilityCaption }) => (
          <Grid item xs={12} sm={6} md={4} key={id || displayImage}>
              href={postLink || `${account}/`}
                alt={accessibilityCaption || 'Instagram picture'}
      {status === 'loading' && <p>loading...</p>}
      {status === 'failed' && <p>Check instagram here</p>}

InstaGrid.defaultProps = {
  media: undefined,

export default compose(
  1. Use the component
<InstaGrid account="origenstudio" numberOfMediaElements={9} />


Table of Contents


This is a HoC that injects instagram data as props. See supported props below:

Type: HOC<Base, Enhanced>


  • account string account from where to get data from.
  • numberOfMediaElements number number of media elements to get. Max 12. (optional, default 12)
  • discardVideos boolean discard videos from media elements. (optional, default false)

Returns any injects the data from getInstagramFeedInfo to the props of the wrapped component.


This function returns a promise that when resolves return data extracted from the public profile page of an instagram account.


  • account string
  • options {numberOfMediaElements: number, discardVideos: boolean} (optional, default {numberOfMediaElements:12,discardVideos:false})

Returns Promise<{accountInfo: any, accountFollowedBy: number, accountFollow: number, postsCount: number, profilePic: string, accountName: string, media: Array<{id: string, displayImage: string, thumbnail: string, likes: number, caption: string, commentsNumber: number, accessibilityCaption: string, dimensions: {width: number, height: number}, postLink: string}>}>


MIT © Origen Studio


Package generated using Nod


  • Babel - Write next generation JavaScript today.
  • Jest - JavaScript testing framework used by Facebook.
  • ESLint - Make sure you are writing a quality code.
  • Prettier - Enforces a consistent style by parsing your code and re-printing it.
  • Flow - A static type checker for JavaScript used heavily within Facebook.
  • Travis CI - Automate tests and linting for every push or pull request.
  • Documentation - A documentation system so good, you'll actually write documentation.
  • Conventional Changelog - Generate a changelog from git metadata.


$ yarn test # run tests with Jest
$ yarn run coverage # run tests with coverage and open it on browser
$ yarn run lint # lint code
$ yarn run docs # generate docs
$ yarn run build # generate docs and transpile code


$ yarn run version patch|minor|major
$ yarn publish

It'll automatically run test, lint, docs, build, generate, and push commits and tags to the remote repository.