Get the information from a public Instagram profile without need to access the API
npm install origen-react-instagram-feedYes, react-instagram-feed would be a better name but it was taken...
1. Install
``sh`
npm install --save origen-react-instagram-feed || yarn add origen-react-instagram-feed
2. Use it in a component
Quick recipe for use with Material-UI
`js
// @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
status: 'completed' | 'loading' | 'failed',
};
const InstaGrid = ({ classes, media, account, status}: Props) => { loading... Check instagram here
return (
{media &&
status === 'completed' &&
media.map(({ displayImage, id, postLink, accessibilityCaption }) => (
}
>
alt={accessibilityCaption || 'Instagram picture'}
className={classes.image}
/>
))}
{status === 'loading' &&
{status === 'failed' &&
);
};
InstaGrid.defaultProps = {
media: undefined,
};
export default compose(
withInstagramFeed,
withStyles(styles),
)(InstaGrid);
`
3. Use the component
`js`
//...
//...
#### Table of Contents
- withInstagramData
- Parameters
- getInstagramFeedInfo
- Parameters
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.
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}>}>
MIT © Origen Studio
Contribute
Package generated using Nod
- 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.
`sh`
$ 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
`sh`
$ 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.