sugarshin / react-instagram-embed Goto Github PK
View Code? Open in Web Editor NEWThe React component for embedding Instagram posts
Home Page: https://sugarshin.github.io/react-instagram-embed/
The React component for embedding Instagram posts
Home Page: https://sugarshin.github.io/react-instagram-embed/
Hy all,
I'm facing this issue to make a clone of Instagram using mern. any to help to resolve it would be highly appreciated.
Module not found: Error: Can't resolve 'querystring' in 'C:\Old windows data\Study data]\Practice Projects\MERN Stack Projects\instaCloneMern\instaclonemern\node_modules\react-instagram-embed\es'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }
It seems like on >1024 wide screens height is not calculated properly and comment section is not shown.
It might be related with Instagram API or the amount of text inside of the caption section. This React component can not set height manually or adjust it dinamically, thats why I'm raising this issue.
Thank you.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These problems occurred while renovating this repository. View logs.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | @babel/plugin-proposal-class-properties |
|
npm | @types/webpack-dev-server |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@babel/core
, @babel/preset-env
, eslint-plugin-react
)node
, @types/node
)@types/jest
, jest
, ts-jest
)@types/react
, @types/react-dom
, react
, react-dom
, react-test-renderer
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
.circleci/config.yml
gh-pages 0.0.6
cimg/node 14.17.3
.github/workflows/github-release.yml
actions/checkout v2
actions/create-release v1
ubuntu 20.04
.node-version
node 14.17.3
package.json
type-fest ^1.2.2
@babel/core 7.24.8
@babel/plugin-proposal-class-properties 7.18.6
@babel/preset-env 7.24.8
@babel/preset-react 7.24.7
@babel/preset-typescript 7.24.7
@hot-loader/react-dom 17.0.2
@types/dotenv-webpack 7.0.7
@types/jest 26.0.24
@types/node 14.18.63
@types/react 17.0.80
@types/react-dom 17.0.25
@types/react-test-renderer 17.0.9
@types/webpack 5.28.5
@types/webpack-dev-server 3.11.6
@typescript-eslint/eslint-plugin 4.33.0
@typescript-eslint/parser 4.33.0
babel-loader 8.3.0
css-loader 5.2.7
dotenv-webpack 7.1.1
eslint 7.32.0
eslint-plugin-react 7.34.4
highlight.js 11.10.0
html-webpack-plugin 5.6.0
husky 7.0.4
is-ci 3.0.1
jest 27.5.1
lint-staged 11.2.6
normalize.css 8.0.1
prettier 2.8.8
react 17.0.2
react-dom 17.0.2
react-github-ribbons 0.2.2
react-hot-loader 4.13.1
react-test-renderer 17.0.2
style-loader 3.3.4
ts-jest 27.1.5
ts-node 10.9.2
typescript 4.9.5
webpack 5.93.0
webpack-cli 4.10.0
webpack-dev-server 3.11.3
react ^17.0.0 || ^16.0.0 || ^15.0.0 || ~0.14.0
react-dom ^17.0.0 || ^16.0.0 || ^15.0.0 || ~0.14.0
.nvmrc
node 14.17.3
The demo URL at https://sugarshin.github.io/react-instagram-embed/ doesn't show me any images and when I change the embed URL I get a "this.request is null" error.
Hi, I am using this library in a project where I need to cover error when there is no media on given Instagram URL. I have noticed that library in that situation doesn't call OnFailure function, but instead renders an empty div after it loads. Any suggestions how should this be handled? Thank you in advance!
I've got three Instagram posts on a webpage, however only the last one is interactable. When I delete the other third the second one is interactable and so on and so forth.
Is this a bug ony my end or the library?
I have added true in hideCaption but it's working. I am still able to see the caption.
hideCaption={true}
Is there a way to have the code show just the entire feed of the users post? Id love to be able to show more than just one post similar to the https://saurabhnemade.github.io/react-twitter-embed/?path=/story/twitter-timeline-embed--timeline-autoheight
Cheers
The github pages deployment is indicative of this module not being functional
https://sugarshin.github.io/react-instagram-embed/
I'm getting error message: Unexpected token ','
It's nested all the way down to the debug
package. I'm using eslint@"^4.19.1" which uses the latest version of debug
. So maybe it can be updated.
Guys, I started getting this error today:
'InstagramEmbed' cannot be used as a JSX component.
Its instance type 'InstagramEmbed' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("<...>/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
I have no ideia what's behind it. Do you know have any clues?
My component:
import InstagramEmbed from "react-instagram-embed";
interface Props {
href: string;
}
export const Instagram = ({ href }: Props) => {
return (
<InstagramEmbed
url={href}
clientAccessToken={process.env.NEXT_PUBLIC_INSTAGRAM_TOKEN}
/>
);
};
Hi, i've some issue about this package, just copy the same code in documentation and the right app id and accesstoken but still can't display something. im using reactjs for this.
UPDATE
March 30, 2020 Update: We understand these are challenging times for our developer community, so we are postponing disabling the Instagram Legacy API Platform by 90 days to June 29, 2020. Remaining endpoints on the Legacy API will no longer be available after this date and your app's users may lose functionality.
We urge you to migrate to the Instagram Graph API and the Instagram Basic Display API without delay so that users of your app have time to transition as well. Both APIs rely on permissions that require App Review , which can take a week or longer to complete, so you should begin the process as soon as you can to avoid any interruption in service. Please see this blog post for tips on getting through our App Review process.
If you're only using the Legacy API to generate tokens in order to display your Instagram Feed on a personal website, you can use the Instagram Basic Display API's User Token Generator to continue generating tokens. The User Token Generator does not require App Review, but it will only work for your owned Instagram accounts (i.e. accounts for which you know the login credentials). Refer to the developer documentation to learn more.
Will the library still work after the above mentioned change?
When I'm using the InstagramEmbed component, after a few refreshes the application refuses to load, and the console logs the attached error. React is trying to perform an action on an unmounted component, which seems to be indicating that some async action wasn't canceled in the unmount lifecycle method.
Currently I'm using typescript along with react 17.0.2. I made a yarn add react-instagram-embed. I have a component called instagram.tsx where I'm using the following code:
import React from "react";
import InstagramEmbed from "react-instagram-embed";
export default function Instagram({ posts }) {
return (
<div >
<InstagramEmbed
url="https://instagr.am/p/Zw9o4/"
maxWidth={600}
hideCaption={false}
containerTagName="div"
protocol=""
injectScript
onLoading={() => {}}
onSuccess={() => {}}
onAfterRender={() => {}}
onFailure={() => {}}
/>
</div>
);
}
But when I go to my webpage I cannot see the instagram post. I went to inspect element to check out the react developer tools and I could see the components.
But when I hover over the components I get
I have tried adding height manually by adding style={{height:"400px"}} in the parent component and maxHeight in the instagramEmbed component but it still does not show up
I use this plugin and follow the basic example but I got the following error (I print it inside onFailure):
TypeError: Cannot read property 'Embeds' of undefined(โฆ)
How to fix this? Thanks.
Hi, when rerendering InstagramEmbed
fast - switching between articles very fast, we sometimes get Cannot read property of null ( reading 'cancel' )
in componentDidUpdate
method.
Seems that simple this.request?.cancel()
should fix it. Or is there any other way I can fix it ? We are using basic example component from docs.
Really enjoy using the tool, thanks!
Recently I have been encountering a 404 error when using the bike example in this repo. Is anyone else having the same 404?
Hey, thanks for the nice component. Plugging it in was pretty pretty simple and it worked flawlessly. Just one small thing, the styling I am seeing is a little different from the demo.
Btw, I am doing server side rendering.
Hi
Thanks for the nice component.
It seems like the request from the component are now blocked by CORS.
The error can be seen on the live demo
When I add the client access token per the NPM and Facebook Developer page the only output I get is the clientaccesstoken.....
Hello, I installed the npm package, imported it at the top of my React file, and cut and pasted the component code straight from the npm documentation. Still, the component doesn't display in my app. There is a popular Youtube tutorial that uses this package and many people in the comments are having the same issue of the component not displaying.
Does this library use the new instagram_oembed endpoint via the facebook graph api [1]? Asking this because I would like to use it later on. But currently I am still struggling to do even raw requests to the endpoint for dev purpose. Reason for this see https://developers.facebook.com/community/threads/388554676046719/?post_id=388554679380052 . Many thanks for your answer and maybe somebody of you has or had the same struggle.
[1]
https://developers.facebook.com/docs/instagram/oembed/
https://developers.facebook.com/docs/features-reference/oembed_read
https://developers.facebook.com/docs/graph-api/reference/instagram-oembed/
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Cannot find preset's package (@sugarshin:js-lib)
As titled,
Is this possible?
Sometimes the media contents of the post causing the embed to become varying in heights.. it look especially weird and ugly if i show it as a carousel of Instagram post.
Is there a way to standardize the embed height? Thanks
I've updated React to 16 and npm gives me a peer dep warning.
Is it possible to add support for it ?
Thanks :)
When I did something like
<InstagramEmbed url="https://www.instagram.com/p/CHS8IfKpEbD/" />
the embed no longer shows, and there's a 400 Bad Request for the URL https://api.instagram.com/oembed/?hidecaption=false&omitscript=true&url=https%3A%2F%2Fwww.instagram.com%2Fp%2FCHS8IfKpEbD%2F
.
Visiting the page myself, when I was logged in, this showed the correct JSON, but if I was not logged in (i.e. incognito mode), there will be the following message:
This endpoint is deprecated. Please read https://developers.facebook.com/docs/instagram/oembed to learn how to migrate your endpoint.
The URL that it pointed to said that /oembed
was deprecated on Oct. 24 2020 in favor of /instagram_oembed
, which requires an API key.
Hi, no matter what I add to the maxWidth option field (1024, 2048, 100%, undefined), the maximum width is set to 658px. If I put in a maxWidth smaller that 658px it works fine.
`npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0 || ^15.0.0 || ~0.14.0" from [email protected]
npm ERR! node_modules/react-instagram-embed
npm ERR! react-instagram-embed@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-01-20T11_18_25_291Z-debug.log`
Hello. I'm facing a issue that even I remove the package and install later this warning keeps showing on my npm install:
npm WARN [email protected] requires a peer of react@^16.0.0 || ^15.0.0 || ~0.14.0 but none is installed. You must install peer dependencies yourself.
And I'm using at the moment React 17.0.1.
Can someone give a little advice to how fix that?
This is the error i get
_Module not found: Error: Can't resolve 'querystring' in \node_modules\react-instagram-embed\es'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }_
I have added my client access token and app id
I've tried my keys. ' | '.
Even the first one is confusing because it can be the app id or the Instagram app id. Tried both.
Hello. I'm having an issue with 2.0.1. I get the following when trying to build with webpack:
ERROR in ./node_modules/react-instagram-embed/es/index.js 1:1243-1278
Module not found: Error: Can't resolve 'querystring' in './node_modules/react-instagram-embed/es'
This doesn't happen with 2.0.0 because that has querystring
listed in its dependencies but it was removed in 2.0.1. Was there a reason it was removed? I don't want to add that to my root dependencies.
Thanks,
Patrick
Hey nice library, worked straight away
I just ran into one issue when I upgraded to react 16.
Your checkAPI() function is returning too early (window.instgrm isn't found yet), and then calling handleFetchSuccess which errors since window.instgrm.Embeds can't be found.
I added my own code around yours which which sets a state variable based on <script async onload={this.onLoad} />
loadInstagram() { // called from componentWillMount()
if (!window.instgrm) {
const s = document.createElement('script')
s.async = s.defer = true
s.src = `https://platform.instagram.com/en_US/embeds.js`
s.id = 'react-instagram-embed-script'
s.onload = this.onLoad
const body: HTMLElement | null = document.body
if (body) {
body.appendChild(s)
}
}
}
https://www.instagram.com/explore/tags/upelections/?__a=1
i have used my proxy it ask for headers i have added still showing it
same origin shows the error over the webapp
I gess, that I can hide only Caption class or I`m wrong?
Hi,
All my embeds are broken because Facebook rejected my app review.
Did anyone manage to have their review accepted ? And how did you do it ? I'm very confused with "Please provide a hanks for your helpURL where we can test Oembed Read." I'd think I should paste there a link to a page in my site where there are embeds. But the field won't accept anything else than a facebook.com URL !
T
Bug noticed on live demo: https://sugarshin.github.io/react-instagram-embed/
The post is not actually showing, just a generic link with "View This Post on Instagram" that takes you to the post on instagram's site.
Thanks for useful package.
Can you add support to v18?
Related: #271
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^16.0.0 || ^15.0.0 || ~0.14.0" from [email protected]
npm ERR! node_modules/react-instagram-embed
npm ERR! react-instagram-embed@"^3.0.0" from the root project
Hey!
Thank you for this plugin, I came across it again as a new version was released.
I struggle to find out what got changed in v2? Is there a changelog? What are the steps to migrate?
Thank you a bunch,
Benedikt
cannot set width, always overrided.
I have been trying to use onLoading function to display a progress indicator. I tried to return a JSX element from the onloading function but that doesn't work. Is there a simple way to do this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.