Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

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 @horacioh/gatsby-theme-instagram

or

yarn add @horacioh/gatsby-theme-instagram
  1. Add the theme to your gatsby-config.js:
module.exports = {
  plugins: ["@horacioh/gatsby-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

All the options are pretty much similar to how you setup gatsby-source-instagram. This theme uses gatsby-source-instagram at its core to pull data from Instagram.

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: "@horacioh/gatsby-theme-instagram",
      options: {
        type: `account` // optional. `account` is the default `type` value
        username: "doraforscale",
      },
    },
  ],
}
Hashtag scraping

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

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-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 MDX

In any MDX file:

import { Grid } from "@horacioh/gatsby-theme-instagram"

# Look at my photos!

<Grid />
Example usage in React components

In any React component:

import React from "react"
import { Grid } from "@horacioh/gatsby-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 "@horacioh/gatsby-theme-instagram"

export default () => (
  <div>
    <Grid card={ComplexCard} />
  </div>
)
How to shadow the Grid component

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

src/@horacioh/gatsby-theme-instagram/components/Grid.js

checkout the Grid Implementation for more about how to shadow it.

The Grid component uses a custom Hook to get the data from GraphQL. In order to modify the queried data, you need to override the useGridQuery hook.

How to override the Grid Component Query

If you want to override the Grid query, you can shadow the custom hook used to fetch data to Instagram:

src/@horacioh/gatsby-theme-instagram/hooks/useGridQuery.js

checkout the useGridQuery Implementation for more about how to shadow it.

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
How to shadow the SimpleCard component

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

src/@horacioh/gatsby-theme-instagram/components/SimpleCard.js

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:

src/@horacioh/gatsby-theme-instagram/components/ComplexCard.js

Issues & Contributions

Please, feel free to file issues or send me a tweet or an email for any assistance, help or feature requests!

© 2024 Gatsby, Inc.