https://github.com/origenstudio/react-instagram-feed
Get the information from a public Instagram profile without need to access the API
https://github.com/origenstudio/react-instagram-feed
instagram instagram-scraper javascript-library react reactjs
Last synced: 21 days ago
JSON representation
Get the information from a public Instagram profile without need to access the API
- Host: GitHub
- URL: https://github.com/origenstudio/react-instagram-feed
- Owner: OrigenStudio
- License: mit
- Created: 2019-05-06T08:50:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T01:14:58.000Z (over 2 years ago)
- Last Synced: 2025-04-20T11:05:50.849Z (about 2 months ago)
- Topics: instagram, instagram-scraper, javascript-library, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 29
- Watchers: 2
- Forks: 3
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# origen-react-instagram-feed
## Quick start
1. Install
```sh
npm install --save origen-react-instagram-feed
```
or
```sh
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>]: string },
status: 'completed' | 'loading' | 'failed',
};
const InstaGrid = ({ classes, media, account, status}: Props) => {
return (
{media &&
status === 'completed' &&
media.map(({ displayImage, id, postLink, accessibilityCaption }) => (
))}
{status === 'loading' &&
loading...
}
{status === 'failed' && Check instagram here
}
);
};
InstaGrid.defaultProps = {
media: undefined,
};
export default compose(
withInstagramFeed,
withStyles(styles),
)(InstaGrid);
```
3. Use the component
```js
//...
//...
```
## API
#### Table of Contents
- [withInstagramData](#withinstagramdata)
- [Parameters](#parameters)
- [getInstagramFeedInfo](#getinstagramfeedinfo)
- [Parameters](#parameters-1)
### withInstagramData
This is a HoC that injects instagram data as props. See supported props below:
Type: HOC<Base, Enhanced>
#### Parameters
- `account` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** account from where to get data from.
- `numberOfMediaElements` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** number of media elements to get. Max 12. (optional, default `12`)
- `discardVideos` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
- `options` **{numberOfMediaElements: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), discardVideos: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)}** (optional, default `{numberOfMediaElements:12,discardVideos:false}`)
Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<{accountInfo: any, accountFollowedBy: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), accountFollow: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), postsCount: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), profilePic: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), accountName: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), media: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<{id: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), displayImage: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), thumbnail: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), likes: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), caption: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), commentsNumber: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), accessibilityCaption: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), dimensions: {width: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), height: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}, postLink: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)}>}>**
## License
MIT © [Origen Studio](https://github.com/origenstudio)
Contribute
Package generated using [Nod](https://npmjs.org/package/generator-nod)
## Features
- [**Babel**](https://babeljs.io/) - Write next generation JavaScript today.
- [**Jest**](https://facebook.github.io/jest) - JavaScript testing framework used by Facebook.
- [**ESLint**](http://eslint.org/) - Make sure you are writing a quality code.
- [**Prettier**](https://prettier.io/) - Enforces a consistent style by parsing your code and re-printing it.
- [**Flow**](https://flowtype.org/) - A static type checker for JavaScript used heavily within Facebook.
- [**Travis CI**](https://travis-ci.org) - Automate tests and linting for every push or pull request.
- [**Documentation**](http://documentation.js.org/) - A documentation system so good, you'll actually write documentation.
- [**Conventional Changelog**](https://github.com/conventional-changelog/conventional-changelog) - Generate a changelog from git metadata.
## Commands
```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
```
### Publish
```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.