Handle bar Template in React

Question

Currently we are migrating one application from jquery to react. In existing app, handlebar is used for few html generation which further send to server for pdf generation . is it possible to re use the handlebar in the REact app. Basically we would like to use the handlebar template and pouplate it with the Json from the backend in React app , is it possible, if so any pointers?

Answer 1

It doesnt have anything to do with React really. If I understand your question correctly, you are looking to running handlebar on the client side (in the browser). The answer is yes you can definitely import Handlebar in your react app and compile the template.

import Handlebars from "handlebars";

const hbr = `
<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
"{{kids.length}} kids:</p>" +
"<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>
`;

const template = Handlebars.compile(hbr);
const htmlString = template(data);

Take a look at https://codesandbox.io/s/sweet-http-c4565 as an example.