Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Anudeep_Garnepudi
Anudeep_GarnepudiAccepted solution
Community Advisor
Feb 1, 2021 7:33 PM UTC

@tusharwdc 

You can write vanilla React. Set the root path from component/template HTML, hit the path from React and render.

<div id="root" data-root-path="/content/...."></div>

Vanilla React sample

import React from "react"; export default class Test extends React.Component { state = { loading: true }; data = { text: null }; async componentDidMount() { const url = document.getElementById("root").getAttribute("data-root-path")+".model.json"; const response = await fetch(url); const data = await response.json(); this.data = data; this.setState({loading: false}); }; render() { return ( //retuen markup if state.loading is false ); } }

This example is if path is generating from back end. If your path is static, you don't need path in html and skip first line in componentDidMount and fetch url directly.

Hope this helps.

AG

5 replies

Peter_Puzanovs
Community Advisor
Community Advisor
Feb 1, 2021 2:42 PM UTC

Hi Tkantk,

 

The best one I have come so far to achieve your requirement, stunning work by Jenna Salau:

https://github.com/DeloitteDigitalAPAC/react-habitat

 

Regards,

Peter

Translate
Level 2
Dec 23, 2021 3:54 PM UTC

Hi Peter,

 

Is there any other plugin available apart from react-habitat, as this doesnt support functional react components

 

Regards

Ramesh

Translate
Peter_Puzanovs
Community Advisor
Community Advisor
Dec 24, 2021 10:48 AM UTC

Hi Ramesh,

 

Check https://www.npmjs.com/package/react-abode as alternative.

 

Regards,

Peter

Translate
Anudeep_Garnepudi
Community Advisor
Anudeep_GarnepudiCommunity AdvisorAccepted solution
Community Advisor
Feb 1, 2021 7:33 PM UTC

@tusharwdc 

You can write vanilla React. Set the root path from component/template HTML, hit the path from React and render.

<div id="root" data-root-path="/content/...."></div>

Vanilla React sample

import React from "react"; export default class Test extends React.Component { state = { loading: true }; data = { text: null }; async componentDidMount() { const url = document.getElementById("root").getAttribute("data-root-path")+".model.json"; const response = await fetch(url); const data = await response.json(); this.data = data; this.setState({loading: false}); }; render() { return ( //retuen markup if state.loading is false ); } }

This example is if path is generating from back end. If your path is static, you don't need path in html and skip first line in componentDidMount and fetch url directly.

Hope this helps.

Translate
AG
Umesh_Thakur
Community Advisor
Community Advisor
Feb 2, 2021 4:14 AM UTC