@horacioh/gatsby-theme-instagram

Gatsby Theme Instagram Source code

• Online demo

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

2. Add the theme to your gatsby-config.js:

module.exports = {
  plugins: ["@horacioh/gatsby-theme-instagram"],
}

3. 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

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 />

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

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

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!