- Install
npm install --save origen-react-instagram-feed
or
yarn add origen-react-instagram-feed
- 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);
- Use the component
//...
<InstaGrid account="origenstudio" numberOfMediaElements={9} />
//...
This is a HoC that injects instagram data as props. See supported props below:
Type: HOC<Base, Enhanced>
account
string account from where to get data from.numberOfMediaElements
number number of media elements to get. Max 12. (optional, default12
)discardVideos
boolean discard videos from media elements. (optional, defaultfalse
)
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.
account
stringoptions
{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.
$ 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
$ 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.