origen-react-instagram-feed

origen-react-instagram-feed

Yes, react-instagram-feed would be a better name but it was taken...

Quick start

1. Install

npm install --save origen-react-instagram-feed || yarn add origen-react-instagram-feed

1. Use it in a component

Quick recipe for use with Material-UI

// @flow

import * as React from 'react';
import withInstagramFeed from 'origen-react-instagram-feed';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import ButtonBase from '@material-ui/core/ButtonBase';
import compose from 'recompose/compose';

const styles = () => ({
  wrapper: {},
  image: {
    width: '100%',
    height: '100%',
  },
});

export type Props = {
  media?: Array<{
    displayImage: string,
    id?: string,
    postLink?: string,
    accessibilityCaption?: string,
  }>,
  account: string,
  classes: { [$Keys<$Call<typeof styles>>]: string },
  status: 'completed' | 'loading' | 'failed',
};

const InstaGrid = ({ classes, media, account, status}: Props) => {
  return (
    <Grid container spacing={32} className={classes.wrapper}>
      {media &&
        status === 'completed' &&
        media.map(({ displayImage, id, postLink, accessibilityCaption }) => (
          <Grid item xs={12} sm={6} md={4} key={id || displayImage}>
            <ButtonBase
              href={postLink || `https://www.instagram.com/${account}/`}
            >
              <img
                src={displayImage}
                alt={accessibilityCaption || 'Instagram picture'}
                className={classes.image}
              />
            </ButtonBase>
          </Grid>
        ))}
      {status === 'loading' && <p>loading...</p>}
      {status === 'failed' && <p>Check instagram here</p>}
    </Grid>
  );
};

InstaGrid.defaultProps = {
  media: undefined,
};

export default compose(
  withInstagramFeed,
  withStyles(styles),
)(InstaGrid);

1. Use the component

//...
<InstaGrid account="origenstudio" numberOfMediaElements={9} />
//...

API

Table of Contents

• withInstagramData
  • Parameters
• getInstagramFeedInfo
  • Parameters

withInstagramData

This is a HoC that injects instagram data as props. See supported props below:

Type: HOC<Base, Enhanced>

Parameters

• account string account from where to get data from.
• numberOfMediaElements number number of media elements to get. Max 12. (optional, default 12)
• discardVideos boolean discard videos from media elements. (optional, default false)

Returns any injects the data from getInstagramFeedInfo to the props of the wrapped component.

getInstagramFeedInfo

This function returns a promise that when resolves return data extracted from the public profile page of an instagram account.

Parameters

• account string
• options {numberOfMediaElements: number, discardVideos: boolean} (optional, default {numberOfMediaElements:12,discardVideos:false})

Returns Promise<{accountInfo: any, accountFollowedBy: number, accountFollow: number, postsCount: number, profilePic: string, accountName: string, media: Array<{id: string, displayImage: string, thumbnail: string, likes: number, caption: string, commentsNumber: number, accessibilityCaption: string, dimensions: {width: number, height: number}, postLink: string}>}>

License

MIT © Origen Studio

Contribute

Package generated using Nod

Features

• Babel - Write next generation JavaScript today.
• Jest - JavaScript testing framework used by Facebook.
• ESLint - Make sure you are writing a quality code.
• Prettier - Enforces a consistent style by parsing your code and re-printing it.
• Flow - A static type checker for JavaScript used heavily within Facebook.
• Travis CI - Automate tests and linting for every push or pull request.
• Documentation - A documentation system so good, you'll actually write documentation.
• Conventional Changelog - Generate a changelog from git metadata.

Commands

$ yarn test # run tests with Jest
$ yarn run coverage # run tests with coverage and open it on browser
$ yarn run lint # lint code
$ yarn run docs # generate docs
$ yarn run build # generate docs and transpile code

Publish

$ yarn run version patch|minor|major
$ yarn publish

It'll automatically run test, lint, docs, build, generate CHANGELOG.md, and push commits and tags to the remote repository.