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!