I want to make document viewer in react which shows document in same page as popup as that is used in slack web application? It should view all kind of document files. Can anyone guide me how to proceed?
Use a document viewer component for react like react-doc-viewer:-
https://www.npmjs.com/package/react-doc-viewer
codesandbox:- https://codesandbox.io/s/zvk4j
Related
I am currently working on a project that exposes Google Docs and Forms to a React frontend using Oauth and iFrames. I am able to embed doc, sheet and slide editors with no issues, but no luck with Google forms (I assume it may not permit editing when embeded), so I have come here to ask if anyone has had any luck doing this.
Whilst it is trivial to embed a Google form itself, I am not able to find a way to access the Google form editor within an iframe as it simply throws a 403. For docs I create an iframe for a given document and suffix the following query params: ?embedded=true&authuser=<EMAIL_ADDRESS>&oauth_token=<OAUTH2_TOKEN>. however this does not work for forms.
Is anyone aware of any work around to access the form editor via iframe? otherwise I will have to create a frontend wrapper for the forms API which is not ideal.
Requirement:
I want a react document viewer for all kinds of file types (PDF, Images, Word, Video),
same as slack has a Document Viewer.
Like Slack, I am building a chat module for my react web app. In which users can upload multiple attachments (PDF, word, png, jpeg etc). I want to create a document viewer for all kinds of files similar to slack.
I googled it and came across one package - react-file-viewer
But this npm package is not updated for the last 3 years.
I came across an article in which the person said it is not going to work for React 18 Article
Does anyone have a suggestion on this?
Do I need to create my custom Viewer which uses multiple packages (Image viewer for image, npm react player for video, pdf viewer for PDF files so on ..) or is there any react npm package already present which provides the similar solution like react-file-viewer
use Google Docs Viewer. it's more stable than react-file-viewer. here's two ways to deal with this:
use Google Docs Viewer with its javascript API. trigger the viewer API when the component is mounted.
use plain <iframe /> to embed the google docs viewer.
<iframe src="https://docs.google.com/viewer?url=http://example.com/my_file.txt&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
please refer to this gist for <iframe /> usage of Google Docs Viewer.
We are having one problem while generating a link preview for our react application URL's. Actually we have the requirement to display the dynamic link preview for different URLs.
We are able to add the link preview by using open graph tags in our index.html file placed under the public folder.
But once we tried to add dynamic metadata using the "react-meta" or "helmet" package. it is successfully changing the title of the application. but links preview are not working after making these changes.
so I kindly let me know if there is any way that we can different link preview for different urls for react application. Thanks in advance.
I want users to be able to design a simple web page to render their content on a page on my site. Are there any projects (ideally react) out there currently that allow a point and click layout design similar to wordpress and generate html?
I have since found the Ory Editor - Seems to fulfil all my requirements.
https://github.com/ory/editor
I have my ElasticSearch setup with kibana showing different panels. I have another angularjs app. I would like to receive input in a field, use angularjs and show kibana panels in my angularjs app itself.
Are there any tutorials/guides to achieve this?
I have googled quite a bit about this, but am unable to find any help.
You could also rephrase my question as "How do I embed a kibana dashboard in my AngularJS Single page website?"
In kibana4, the easiest way to embed a dashboard is using an iframe. Click the "Share" button in the top-right corner to get the appropriate iframe tag. Then edit it as needed to make it embed seamlessly. Check out the seamless attribute.
When I google it your question, I have found some git article
May be it will help you to
You can use iframe read this
https://github.com/elastic/kibana/issues/729