{"id":28152938,"url":"https://github.com/origenstudio/react-instagram-feed","last_synced_at":"2025-05-15T05:12:22.327Z","repository":{"id":34863974,"uuid":"185159114","full_name":"OrigenStudio/react-instagram-feed","owner":"OrigenStudio","description":"Get the information from a public Instagram profile without need to access the API","archived":false,"fork":false,"pushed_at":"2022-12-09T01:14:58.000Z","size":2375,"stargazers_count":29,"open_issues_count":25,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T11:05:50.849Z","etag":null,"topics":["instagram","instagram-scraper","javascript-library","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OrigenStudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-06T08:50:49.000Z","updated_at":"2022-11-18T12:45:33.000Z","dependencies_parsed_at":"2023-01-15T09:45:16.087Z","dependency_job_id":null,"html_url":"https://github.com/OrigenStudio/react-instagram-feed","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrigenStudio%2Freact-instagram-feed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrigenStudio%2Freact-instagram-feed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrigenStudio%2Freact-instagram-feed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrigenStudio%2Freact-instagram-feed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OrigenStudio","download_url":"https://codeload.github.com/OrigenStudio/react-instagram-feed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276431,"owners_count":22043869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["instagram","instagram-scraper","javascript-library","react","reactjs"],"created_at":"2025-05-15T05:12:21.906Z","updated_at":"2025-05-15T05:12:22.315Z","avatar_url":"https://github.com/OrigenStudio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# origen-react-instagram-feed\n\n## Quick start\n\n1.  Install \n\n```sh\nnpm install --save origen-react-instagram-feed\n```\nor\n```sh\nyarn add origen-react-instagram-feed\n```\n\n2.  Use it in a component\n\nQuick recipe for use with Material-UI\n\n```js\n// @flow\n\nimport * as React from 'react';\nimport withInstagramFeed from 'origen-react-instagram-feed';\nimport { withStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport ButtonBase from '@material-ui/core/ButtonBase';\nimport compose from 'recompose/compose';\n\nconst styles = () =\u003e ({\n  wrapper: {},\n  image: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport type Props = {\n  media?: Array\u003c{\n    displayImage: string,\n    id?: string,\n    postLink?: string,\n    accessibilityCaption?: string,\n  }\u003e,\n  account: string,\n  classes: { [$Keys\u003c$Call\u003ctypeof styles\u003e\u003e]: string },\n  status: 'completed' | 'loading' | 'failed',\n};\n\nconst InstaGrid = ({ classes, media, account, status}: Props) =\u003e {\n  return (\n    \u003cGrid container spacing={32} className={classes.wrapper}\u003e\n      {media \u0026\u0026\n        status === 'completed' \u0026\u0026\n        media.map(({ displayImage, id, postLink, accessibilityCaption }) =\u003e (\n          \u003cGrid item xs={12} sm={6} md={4} key={id || displayImage}\u003e\n            \u003cButtonBase\n              href={postLink || `https://www.instagram.com/${account}/`}\n            \u003e\n              \u003cimg\n                src={displayImage}\n                alt={accessibilityCaption || 'Instagram picture'}\n                className={classes.image}\n              /\u003e\n            \u003c/ButtonBase\u003e\n          \u003c/Grid\u003e\n        ))}\n      {status === 'loading' \u0026\u0026 \u003cp\u003eloading...\u003c/p\u003e}\n      {status === 'failed' \u0026\u0026 \u003cp\u003eCheck instagram here\u003c/p\u003e}\n    \u003c/Grid\u003e\n  );\n};\n\nInstaGrid.defaultProps = {\n  media: undefined,\n};\n\nexport default compose(\n  withInstagramFeed,\n  withStyles(styles),\n)(InstaGrid);\n```\n\n3.  Use the component\n\n```js\n//...\n\u003cInstaGrid account=\"origenstudio\" numberOfMediaElements={9} /\u003e\n//...\n```\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n#### Table of Contents\n\n-   [withInstagramData](#withinstagramdata)\n    -   [Parameters](#parameters)\n-   [getInstagramFeedInfo](#getinstagramfeedinfo)\n    -   [Parameters](#parameters-1)\n\n### withInstagramData\n\nThis is a HoC that injects instagram data as props. See supported props below:\n\nType: HOC\u0026lt;Base, Enhanced\u003e\n\n#### Parameters\n\n-   `account` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** account from where to get data from.\n-   `numberOfMediaElements` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** number of media elements to get. Max 12. (optional, default `12`)\n-   `discardVideos` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** discard videos from media elements. (optional, default `false`)\n\nReturns **any** injects the data from `getInstagramFeedInfo` to the props of the wrapped component.\n\n### getInstagramFeedInfo\n\nThis function returns a promise that when resolves return data extracted from the public profile page of an instagram account.\n\n#### Parameters\n\n-   `account` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** \n-   `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}`)\n\nReturns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\u0026lt;{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)\u0026lt;{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)}\u003e}\u003e** \n\n## License\n\nMIT © [Origen Studio](https://github.com/origenstudio)\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eContribute\u003c/strong\u003e\u003c/summary\u003e\n\nPackage generated using [Nod](https://npmjs.org/package/generator-nod)\n\n## Features\n\n-   [**Babel**](https://babeljs.io/) - Write next generation JavaScript today.\n-   [**Jest**](https://facebook.github.io/jest) - JavaScript testing framework used by Facebook.\n-   [**ESLint**](http://eslint.org/) - Make sure you are writing a quality code.\n-   [**Prettier**](https://prettier.io/) - Enforces a consistent style by parsing your code and re-printing it.\n-   [**Flow**](https://flowtype.org/) - A static type checker for JavaScript used heavily within Facebook.\n-   [**Travis CI**](https://travis-ci.org) - Automate tests and linting for every push or pull request.\n-   [**Documentation**](http://documentation.js.org/) - A documentation system so good, you'll actually write documentation.\n-   [**Conventional Changelog**](https://github.com/conventional-changelog/conventional-changelog) - Generate a changelog from git metadata.\n\n## Commands\n\n```sh\n$ yarn test # run tests with Jest\n$ yarn run coverage # run tests with coverage and open it on browser\n$ yarn run lint # lint code\n$ yarn run docs # generate docs\n$ yarn run build # generate docs and transpile code\n```\n\n### Publish\n\n```sh\n$ yarn run version patch|minor|major\n$ yarn publish\n```\n\nIt'll automatically run `test`, `lint`, `docs`, `build`, generate `CHANGELOG.md`, and push commits and tags to the remote repository.\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forigenstudio%2Freact-instagram-feed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forigenstudio%2Freact-instagram-feed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forigenstudio%2Freact-instagram-feed/lists"}