Using ContentBox.js in a React Project
This walkthrough will navigate you through the steps of integrating ContentBox.js into your React project, from the initial setup to implementation.
Setting Up Your React Project
We'll use the Vite tool for its simplicity and efficiency in setting up React projects. Open the terminal and run the following command:
npm create vite@latest
When prompted, name your project (for instance, react-contentbox), select 'React' as the framework, and 'JavaScript' as the language.
Once created, navigate to your project folder and install dependencies:
cd react-contentbox
npm install
To start your project, run:
npm run dev
Check http://localhost:5173 on your browser to confirm everything is correctly setup.
Open your React project directory in your code editor of choice (for example, Visual Studio Code).
Installing ContentBox.js
Now that your project is set, it's time to integrate ContentBox.js. In your project directory, add ContentBox.js via npm:
npm i @innovastudio/contentbox
Next, download the ContentBox.js ZIP package from the user area, unzip it, and copy the following files and folders to your project's public directory:
- public/assets/
- public/box/
- public/contentbox/
- public/contentbox/
- public/uploads/
- public/blank.html
- public/assets.html
- public/preview.html
To ensure compatibility with the latest version of ContentBox.js installed via npm, we recommend using the assets from the latest ContentBox.js package.
Implementation
Let's proceed with integrating ContentBox.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>,
)
Next, replace the content in src/App.jsx with the code below to embed ContentBox.js.
import { useEffect } from 'react';
import ContentBox from '@innovastudio/contentbox';
import '@innovastudio/contentbox/public/contentbox/contentbox.css';
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css';
let builder;
function App() {
useEffect(() => {
builder = new ContentBox({
// Basic Settings
canvas: true, // Enable the new canvas mode
controlPanel: true, // Enable the new control panel
iframeSrc: 'blank.html', // Enable resizable content area
// Template Sets
templates: [
{
url: 'assets/templates-simple/templates.js',
path: 'assets/templates-simple/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
{
url: 'assets/templates-quick/templates.js',
path: 'assets/templates-quick/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
{
url: 'assets/templates-animated/templates.js',
path: 'assets/templates-animated/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
],
slider: 'glide', // Enable Slider
navbar: true // Enable Navbar
});
// Load sample content
let html = `<div class="is-section is-section-100 is-box type-system-ui">
<div class="is-overlay"></div>
<div class="is-container v2 size-18 leading-14 is-content-1300">
<div class="row">
<div class="column">
<h1 class="leading-11 size-88">We design. We develop. We get it done — nicely.</h1>
</div>
</div>
</div>
</div>`;
let mainCss = '';
let sectionCss = '';
builder.loadHtml(html); // Load html
builder.loadStyles(mainCss, sectionCss); // Load styles
return () => {
// cleanup
builder.destroy();
builder = null;
};
}, []);
return (
<>
</>
)
}
export default App
Check http://localhost:5173 on your browser.
ContentBox.js is now integrated into your React project.
Now, you're ready to use ContentBox.js in your React project!
Adding Custom Top Bar
ContentBox.js allows you to add a custom top bar, where you can add your logo, links, or additional buttons for custom needs. The next section of this tutorial will guide you through the implementation:
ContentBox.js documentation
Should you require further information or assistance, please refer to the ContentBox.js documentation:
https://demo.innovastudio.com/docs/ContentBox.pdf