https://github.com/sugarshin/react-instagram-embed

The React component for embedding Instagram posts
https://github.com/sugarshin/react-instagram-embed

component instagram react

Last synced: 11 days ago
JSON representation

The React component for embedding Instagram posts

• Host: GitHub
• URL: https://github.com/sugarshin/react-instagram-embed
• Owner: sugarshin
• Created: 2016-10-22T06:18:29.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-08-31T09:46:34.000Z (4 months ago)
• Last Synced: 2024-11-29T20:58:24.258Z (25 days ago)
• Topics: component, instagram, react
• Language: TypeScript
• Homepage: https://sugarshin.github.io/react-instagram-embed/
• Size: 3.49 MB
• Stars: 256
• Watchers: 8
• Forks: 70
• Open Issues: 46
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-instagram-embed

[![CircleCI][circleci-image]][circleci-url]

[![npm version][npm-image]][npm-url]

[![License][license-image]][license-url]

React embedding Instagram posts component

```bash

yarn add react-instagram-embed

# or

npm i react-instagram-embed

```

[Live demo](https://sugarshin.github.io/react-instagram-embed/)

## Usage

```tsx

import InstagramEmbed from 'react-instagram-embed';

 {}}

  onSuccess={() => {}}

  onAfterRender={() => {}}

  onFailure={() => {}}

/>

```

Access token is combination of App Id and Client Token. See https://developers.facebook.com/docs/instagram/oembed/#access-tokens for more details.

## props

- `url` {String} Instagram URL. Required

- `clientAccessToken` {String} Instagram Client Access Token. Required

- `maxWidth` {Number} Max width. Minimum size is `320`. Default `undefined`

- `hideCaption` {Boolean} Default `false`

- `containerTagName` {String} Default `'div'`

- `protocol` {String} Instagram API script protocol. Default `''` same as current protocol

  - This property needed if you use device's file system, for example, Electron, Cordova apps

- `injectScript` {Boolean} Default `true`

- `onLoading` {Function}

- `onSuccess` {Function}

- `onAfterRender` {Function}

- `onFailure` {Function}

## License

[MIT][license-url]

© sugarshin

[npm-image]: https://img.shields.io/npm/v/react-instagram-embed.svg?style=flat-square

[npm-url]: https://www.npmjs.org/package/react-instagram-embed

[circleci-image]: https://circleci.com/gh/sugarshin/react-instagram-embed/tree/master.svg?style=svg&circle-token=8991301b0db526852c58dc884a349cb8e00f1b24

[circleci-url]: https://circleci.com/gh/sugarshin/react-instagram-embed/tree/master

[license-image]: https://img.shields.io/:license-mit-blue.svg?style=flat-square

[license-url]: https://sugarshin.mit-license.org/