Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

Gatsby Theme Instagram Source code

Grid With SimpleCard component Grid With ComplexCard component

What you get from this theme

  • Add Instagram posts to your Gatsby site
  • A set of UI Components to layout posts on every section.
  • A set of custom hooks to customize the data you render on your components

Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme
npm install --save @priyank-vaghela/gatsby-custom-theme-instagram

or

yarn add @priyank-vaghela/gatsby-custom-theme-instagram
  1. Add the theme to your gatsby-config.js:
module.exports = {
  plugins: ["@priyank-vaghela/gatsby-custom-theme-instagram"],
}
  1. Start your site
gatsby develop

Usage

Theme options

Key Default value Description
type account the type of data that will be queried. Possible values are account, hashtag & user-profile (user-profile is not supported yet).
username doraforscale instagram username you want to pull data from
hashtag undefined instagram hashtag you want to pull data from

Example usage

Public Scrapping for posts

If you intend to use the public scraping method then you need to pass the concerning username

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@priyank-vaghela/gatsby-custom-theme-instagram",
      options: {
        type: `account` // optional. `account` is the default `type` value
        username: "apple",
      },
    },
  ],
}
Hashtag scraping

If you want to source nodes from hashtags then you need the following:

// In your gatsby-config.js
plugins: [
  {
    resolve: `@priyank-vaghela/gatsby-custom-theme-instagram`,
    options: {
      type: `hashtag`,
      hashtag: `snowing`,
    },
  },
]

Exported components

Grid

Grid With SimpleCard component

This component let you render a grid of Instagrams posts. This component is useful when you want to render the recents posts for a specific account or hashtag.

This component uses internally the Container components from theme-ui, so the with of the component will depend on the Container size you have defined.

Grid’s Props
Props Default value Required Description
card SimpleCard false The component that will be rendered for each Instagram post.
Example usage in React components

In any React component:

import React from "react"
import { Grid } from "@priyank-vaghela/gatsby-custom-theme-instagram"

export default () => (
  <div>
    <Grid />
  </div>
)
Example usage in React components using <ComplexCard />

Grid With ComplexCard component

import React from "react"
import { Grid, ComplexCard } from "@priyank-vaghela/gatsby-custom-theme-instagram"

export default () => (
  <div>
    <Grid card={ComplexCard} />
  </div>
)

SimpleCard

SimpleCard component

This component let you render a simgle Instagram post, with a simple hover effect that shows the amount of likes and comments for each post.

SimpleCard’s Props
Props Default value Required Description
id false The Instagram Post ID
likes false The Instagram Post number of likes
comments false The Instagram Post number of comments
localFile true The Instagram Post localFile Gatsby Image data

ComplexCard

ComplexCard component

This component let you render a simgle Instagram post, with a simple hover effect that shows the amount of likes and comments for each post.

ComplexCard’s Props
Props Default value Required Description
id false The Instagram Post ID
likes false The Instagram Post number of likes
comments false The Instagram Post number of comments
username true The Instagram Post username’s owner
localFile true The Instagram Post localFile Gatsby Image data
How to shadow the ComplexCard component

If you want to use component shadowing with this component, create a file at the following path in your site: