origen-react-instagram-feed
Yes, react-instagram-feed
would be a better name but it was taken...
Quick start
- Install
npm install --save origen-react-instagram-feed || yarn add origen-react-instagram-feed
- Use it in a component
Quick recipe for use with Material-UI
// @flow ;;;;;; const styles = wrapper: {} image: width: '100%' height: '100%' ; account: string classes: $Keys<$Call<typeof styles>>: string status: 'completed' | 'loading' | 'failed'}; const InstaGrid = { return <Grid container spacing=32 className=classeswrapper> media && status === 'completed' && media status === 'loading' && <p>loading...</p> status === 'failed' && <p>Check instagram here</p> </Grid> ;}; InstaGriddefaultProps = media: undefined; withInstagramFeed InstaGrid;
- Use the component
//...<InstaGrid account="origenstudio" numberOfMediaElements=9 />//...
API
Table of Contents
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, default12
)discardVideos
boolean discard videos from media elements. (optional, defaultfalse
)
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
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}>}>
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.