Consuming Confluence Cloud API content in a React application

Question

Greetings,

I was wondering what practises are available out there to transform a Confluence Cloud API call, say to fetch a specific page's content, into a React component. Basically:

* Confluence hosts content
* Application API fetches page from confluence through its API
* Application API forwards the response to the React application
* React application transforms the Confluence page's content into all the required components: tables, lists, paragraphs, images, etc

I have played around with the  `xml-js` library, but its implementation is quite messy. I was wondering if perhaps there was something better out there.

luketelo_joseph · Answer

Did you get help on this?

Virginia Carrasco · Answer

Thank you for your answer.

Although that method doesn't quite work for my use case. I am parsing a Confluence page that returns its content in XML into fully fledged React components.

Zak Laughton · Answer

Hi Virginia,

The process of using the Confluence API in a React component should be similar to using any other API with React. The React documentation has some great info and details: React - AJAX and APIs.

As for parsing the page content, you could try just using .match() and regex. This StackOverflow post also has a pretty good suggestion to turn the JSON response string into an HTML DOM element, which you can then parse with .querySelector() (or .querySelectorAll()) to find whatever elements you're looking for.

I hope this helps!
– Zak