Consuming Confluence Cloud API content in a React application

[Virginia Carrasco]

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:

1. Confluence hosts content
2. Application API fetches page from confluence through its API
3. Application API forwards the response to the React application
4. 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.

[Zak Laughton]

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

[Virginia Carrasco]

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.

[luketelo_joseph]

Did you get help on this?