Create Custom PDF Viewer using React PDF & React Hooks

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 54

  • @gray7714
    @gray7714 2 роки тому +10

    Yes! Finally a quick and easy to follow tutorial on how to do something practical in React/Next.js. Thank you so much for doing this video!

    • @Recoding
      @Recoding  2 роки тому +1

      We are glad that this video could help you stay tuned for more interesting contents regarding React and Next.JS.

  • @farbodAprin
    @farbodAprin 2 роки тому +10

    Failed to load PDF file. didnt work for me

  • @ankitthapa445
    @ankitthapa445 8 місяців тому

    noob question but how would you integrate the next previous buttons along with auto scroliing?

  • @fkbey5756
    @fkbey5756 2 роки тому +4

    can you show, how to preview local pdf files?

  • @MustafaKOSMAZ-ye9nv
    @MustafaKOSMAZ-ye9nv Рік тому

    thanks

  • @webarrays
    @webarrays Рік тому +2

    please help ./node_modules/react-pdf/dist/esm/entry.webpack.js:3:0
    Module not found: Can't resolve 'file-loader'

  • @jumb0_9
    @jumb0_9 Рік тому

    what version of react did you use? and what version of react-pdf did you use? Please

  • @sivasai9734
    @sivasai9734 Рік тому

    How can we select text in the pdf after rendering in it

  • @emmanuelbudke6499
    @emmanuelbudke6499 2 роки тому

    Do I have to press the insert text button? is there a way to lock it so I don't have to press it like every time?

  • @MirAnupamHossainAkib--
    @MirAnupamHossainAkib-- 2 роки тому

    thanks. helped me a lot

  • @mosespeter9711
    @mosespeter9711 2 роки тому

    You've saved the day!

  • @GAneshStudyGAng
    @GAneshStudyGAng 2 роки тому

    Can we generate the new pdf file using React-PDF library?

  • @suvarnarajunallapu7188
    @suvarnarajunallapu7188 2 роки тому +1

    Hello Recoding!! Is it possible to add Highlighting like markup and adding comments features (like in word doc) to pdf using React? Can you provide the related APIs if possible?

  • @timtech9361
    @timtech9361 2 роки тому +1

    Cannot use import statement outside a module??????????????????

  • @PaviThra-pq3he
    @PaviThra-pq3he 2 роки тому +1

    Mam is that possible to highlight some text using react-pdf can you please share some code

    • @Recoding
      @Recoding  2 роки тому

      Yes, surely you can highlight text using the custom text renderer attribute inside page components. You can check the documentation regarding that you will get step by solution for that.

  • @triyoga6899
    @triyoga6899 2 роки тому +1

    Failed to load PDF file blocked by CORS any solution?

    • @Recoding
      @Recoding  2 роки тому

      Use node.js or add this project inside any server you will not face this error again.

  • @subhadeepchowdhury5244
    @subhadeepchowdhury5244 Рік тому

    Yay, now I don't havev to buy some third-pirty solution for PDF viewing.

  • @antoniomiguel9447
    @antoniomiguel9447 Рік тому

    I got the error """ Module not found: Can't resolve 'file-loader' "" anyone else ? This module was supposed to be inside the one we added to the project right ?

  • @thomasg4967
    @thomasg4967 2 роки тому

    But how do we make the Document responsive?

  • @reddyvasudevarao2211
    @reddyvasudevarao2211 2 роки тому

    Instead of giving static pdf, can we ask user to select the pdf.

    • @Recoding
      @Recoding  Рік тому +1

      Yes, you can ask user to select the pdf and redirect the link to the page. First you need to create a PDF picker component which will redirect the URL to the PDF viewer component.

  • @developer_mx
    @developer_mx 2 роки тому

    It doesn't work with external url

  • @webarrays
    @webarrays Рік тому

    i am trying from 4 days no library is working please help somone
    i am trying to add in next js

  • @halilpeker8811
    @halilpeker8811 Рік тому

    how to run with url

  • @abhilashm5236
    @abhilashm5236 2 роки тому

    very informative , can you please make a api call and display the pfd.

    • @Recoding
      @Recoding  2 роки тому

      Sure, but which API call you saying for like a link from RESTAPI and show the data or some other kind of please mention it also.

    • @abhilashm5236
      @abhilashm5236 2 роки тому +1

      Thanks for the very quick response.
      Eg. I make a GET request and in response I get the pdf. I get the entire pdf in binary.

  • @dulanjalivithanage2291
    @dulanjalivithanage2291 2 роки тому +1

    interesting..

  • @insxne__6319
    @insxne__6319 Рік тому

    does this support docs excel etc?

    • @Recoding
      @Recoding  Рік тому

      For that you need to use some different dependencies.

    • @insxne__6319
      @insxne__6319 Рік тому

      @@Recoding can you please give me some example? i have to diaplay pdf, excel pptx, doc, txt, can i have an example

    • @Recoding
      @Recoding  Рік тому

      You could use react-doc-viewer for opening pptx, doc, txt and other format. Check this out : www.npmjs.com/package/react-doc-viewer

    • @insxne__6319
      @insxne__6319 Рік тому

      @@Recoding thanks

    • @insxne__6319
      @insxne__6319 Рік тому

      @@Recoding ive tries to use thia one unfortunately it does not support react 18+

  • @abdullhaseeb4157
    @abdullhaseeb4157 Рік тому +2

    Module not found: Error: Package path ./dist/esm/entry.webpack is not exported from package C:\**\**\**\**\**\upworkproject
    ode_modules
    eact-pdf (see exports field in
    C:\**\**\**\**\**\**
    ode_modules
    eact-pdf\package.json)
    I am getting the above error can somebody please help me with it.

  • @kacperkepinski4990
    @kacperkepinski4990 2 роки тому

    module not found

    • @Recoding
      @Recoding  2 роки тому

      Could you please tell which module you unable to found.

  • @NiceChange
    @NiceChange Рік тому

    Warning: getHexString - ignoring invalid character: 104 keep getting this error

  • @webarrays
    @webarrays Рік тому

    ./node_modules/react-pdf/dist/esm/entry.webpack.js:3:0
    Module not found: Can't resolve 'file-loader'

  • @kacperkepinski4990
    @kacperkepinski4990 2 роки тому

    its 1 big page...

  • @mrbuster3106
    @mrbuster3106 2 роки тому +1

    Does not work, despite cloning straight from repo. Fix or take down, we need to learn from resources that work.

    • @Recoding
      @Recoding  2 роки тому

      What's the error you are getting? Please share it we'll fix it.

    • @abhinavtiwari3226
      @abhinavtiwari3226 2 роки тому

      @@Recoding It is showing PDF file failed to load, in Inspect elemnt it is showing Warning: getHexString - ignoring invalid character in multiple lines

  • @farfarjam
    @farfarjam Рік тому

    I have done almost all the steps the same as you but I constantly get this error "GET 127.0.0.1:3000/pdf.worker.js 404 (Not Found)" and in my console it says that "Warning: Setting up fake worker." I searched and I found that this problem occurs mostly for external files while I am doing this locally. can anybody give me a hint about it? thank you in advance,

    • @Recoding
      @Recoding  Рік тому +1

      Please checkout the source code of the video.

  • @PanosPitsi
    @PanosPitsi Рік тому

    I have ocd please for the love of god commit your repo 🥶🥶