Go to BlogHandy Home
  1. All Collections
  2. Integrations
  3. How to use BlogHandy on a React Website
Image

How to use BlogHandy on a React Website

Avatar

By Uwe

November 13, 2023

1. Update the index.html file in the public folder to contain the following script (replace with your specific BlogHandy ID that you see in the Dashboard):

<script>
      var bh_id = "YOUR_ID_HERE";
</script>

2. Add the following div within the component where you want to render the blog:

<div id="bh-posts"></div>

3. Load the blog engine script after the component mounts:

React.useEffect(() => {        
const script = document.createElement("script");        
script.src = "https://www.bloghandy.com/api/bh_blogengine.js";        
script.async = true;        
// script.onload = () => this.scriptLoaded();
        document.body.appendChild(script);
    }, [])
Here's the full component for reference:

const Blog = () => {
React.useEffect(() => {        
const script = document.createElement("script");        
script.src = "https://www.bloghandy.com/api/bh_blogengine.js";        
script.async = true;        
// script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
    }, [])

return (<>        <div id="bh-posts"></div>
 </>)
}

export default Blog;


Note that for best SEO performance, we recommend hosting the blog as a subdirectory in your react application (i.e. myapp.com/blog as opposed to blog.myapp.com)
IMAGE