@priyank-vaghela/gatsby-custom-theme-instagram v0.0.6

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 @priyank-vaghela/gatsby-custom-theme-instagram

or

yarn add @priyank-vaghela/gatsby-custom-theme-instagram

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

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

3. Start your site

gatsby develop

Usage

Theme options

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

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

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

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

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

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

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

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: