React | Media Library Widget not using config when starting with openMediaLibrary

Follow

Stefan

• November 16, 2021 17:22

Dear Cloudinary-Team,

I've prepared a repository illustrating the issue: https://github.com/natterstefan/cloudinary-media-library-react-example. Make sure you add a valid `.env` as described in the `README.md`.

The issue is that when I try to render the Media Library in a node handled by React (`inline_container`) it does not respect and use the configuration and as a result `insertHandler` is not invoked for instance. When I render it _via_ React but in an HTML Element that is already present in the `index.html` it works...

When you start the example repository you see the media library three times. The first one is rendered in a React node, the second is initialized in React but rendered in an HTML Element existing outside of React and the last one is pure js without React.

The main problem I have now is: How can I use the Media Library inside React inside a node that is handled and managed by React as well.

Let me know if you need any more details.

Thanks,
Stefan

0

• 

  Eric Pasos

  • November 17, 2021 15:07

  Hi Stefan,

  I have provided some answers to the internal ticket you've created. And to provide the information here, when attaching the Media Library Widget to a div element, the id parameter is linked with the inline_container parameter of the cloudinary.openMediaLibrary:

  mediaLibrary.current = (window as any).cloudinary.openMediaLibrary(
   {
      ...config,
      inline_container:'#widget-container',
   },
   {
      insertHandler: (data: any) => {
          console.log('REACT insertHandler App.tsx', data)
      },
      showHandler: () => {
          console.log("show")
      },
      hideHandler: () => {
          console.log("hide")
      }
    },
  )

   

  For the div element:

  <div id="widget-container" ref={setRef} style={{ height: '45vh', paddingBottom: '5vh' }}></div>

  Hope this helps.

  1

  Comment actions Permalink
• 

  Stefan

  • November 17, 2021 18:06

  Hi Eric,

  as I said in the internal ticket, thanks for your quick help and it works as you suggested. Now I only need to find out how to solve the other issue I posted about "Media Library has no close event".

  0

  Comment actions Permalink
• 

  Eric Pasos

  • November 18, 2021 05:19

  Hi Stefan,

  You're welcome! I will provide the answers to the other ticket thread.

  0

  Comment actions Permalink

Post is closed for comments.