Instagram Gallery

!MIT
!v1.4.0
!npm type definitions

A React Component that uses the Instagram Graph API to create a gallery from an Instagram users feed.

This package includes Typescript declarations.

Install

``
yarn add instagram-gallery

OR

npm install --save instagram-gallery
`

Usage

$3

To display a simple gallery with a set number of items.

Props:

- accessToken: Required.
- count: Required. Defines the number of items.

`
import { InstagramGallery } from "instagram-gallery";

const App = () => {
return
}

export default App
`

$3

To display a paginated gallery with a set number of items per page.

Props:

- accessToken: Required.
- count: Required. Defines the number of items per page.
- pagination: Optional. Boolean to show the pagination buttons.

`
import { InstagramGallery } from "instagram-gallery";

const App = () => {
return
}

export default App
`

$3

Everyone has different needs so styles have been intentionally left out of this package.

This component only has 4 elements to apply styles to:

- The main gallery container: .instagram-gallery

- Instagram item containers: .instagram-item

- Instagram images themselves: .instagram-image

- Pagination container: .pagination

Example CSS used for development:

`
.instagram-gallery {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
}

.instagram-item {
-webkit-box-flex: 0;
flex: 0 0 calc(100% / 6 - 10px);
margin: 5px;
display: block;
position: relative;
}

.instagram-image {
display: block;
width: 100%;
height: 100%;
}

.pagination {
display: block;
margin: 0 auto;
padding: 2em;
}
``

Getting an access token

- Log in to Facebook Developer
- Create an app that uses Instagram basic display.
- Add a test user in the roles section (Bear in mind only public accounts can generate access tokens).
- Accept the tester invitation on Instagram (Settings > Apps and Websites > Tester Invites)
- Go back to the Facebook Developer portal and you should be able to generate a token for the account.

Contributing

This package was made as a bit of fun because I always found myself needing it for projects.

If you find it useful or have any issues / ideas please open an issue on GitHub.