Using ContentBuilder.js in a React Project
In this guide, we'll walk through the setup and usage of ContentBuilder.js in a React project
Setting Up Your React Project
Before diving into ContentBuilder.js integration, ensure you have a React project ready to go. We'll utilize the Vite tool for its simplicity and efficiency in setting up React projects.
npm create vite@latest
Follow the prompts, providing a project name (e.g., react-contentbuilder-simple), selecting 'React' for the framework, and 'JavaScript' for the language.
Once created, navigate to your project folder and install dependencies:
cd react-contentbuilder-simple
npm install
Now, you can run the project:
npm run dev
Visit http://localhost:5173 in your browser to ensure everything is set up correctly.
Open your React project folder in your preferred code editor (e.g., Visual Studio Code).
Installing ContentBuilder.js
With the project ready, let's integrate ContentBuilder.js. In your project directory, install ContentBuilder.js via npm:
npm i @innovastudio/contentbuilder
Additionally, download the ContentBuilder.js ZIP package from your user area, extract it, and copy the following files and folders into your project's public folder:
- public/assets/
- public/contentbuilder/
- public/uploads/
- public/assets.html
We recommend using the most recent asset files from the ContentBuilder.js package to ensure compatibility with the latest ContentBuilder version installed via NPM.
Implementation
Now, let's integrate ContentBuilder.js into our React project. First, remove unnecessary code in the src/main.jsx file.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
Then, replace src/App.jsx with the following code:
import React, { useEffect } from 'react';
import ContentBuilder from '@innovastudio/contentbuilder';
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css';
let builder;
function App() {
useEffect(() => {
builder = new ContentBuilder({
container: '.container',
snippetModal: true,
snippetModalLeft: true,
});
// Load snippet file
builder.loadSnippets('assets/minimalist-blocks/content.js');
// Load sample content
builder.loadHtml(`
<div class="row">
<div class="column">
<h1 class="leading-none font-medium size-64">Hi There..</h1>
</div>
</div>
`);
return () => {
// cleanup
builder.destroy();
builder = null;
};
}, []);
return (
<>
<div className="container" style={{
maxWidth: '800px',
margin: '250px auto',
width: '100%',
padding: '0 20px' }}>
</div>
</>
)
}
export default App
To display your content created using ContentBuilder, you will need to include the necessary CSS. Add the CSS to your index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<link rel="stylesheet" href="/assets/minimalist-blocks/content.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
With this step, we apply content.css to the content.
ContentBuilder.js is now integrated into your React project.
Now, you're ready to use ContentBuilder.js in your React project!
Additional Functionality
For more functionalities such as saving content, uploading image files, or enabling AI-Assistant, server-side handling is required. You can explore the example implementation provided in the user's download area. Additionally, refer to the ContentBuilder.js documentation for further guidance.