Head-On UI library enables web developer to build light weight web applications that uses a "headless" content management system (CMS) for managing content and UI experience. The web application built with Head-On UI will consume both layouts (UX) and content, via API, from "headless" CMS such as Contentful, Strapi, or any of their favorite content management systems.
Embed Head-On UI into your React app. (There are examples for Next in the documentation.)
Install Head-On via NPM to an existing React app
$ npm install @headon/core @headon/reactHead-On UI uses <HeadOnProvider /> component for initializing context and make Head-On available to the rest of your application.
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {options,componentRegistry} from './HeadOnConfiguration';
import { HeadOnProvider } from '@headon/react';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<HeadOnProvider options={options} componentRegistry={componentRegistry}>
<App />
</HeadOnProvider>
);Render a set of components represented by metadata from the CMS, a "view", using <RenderView /> component
// App.tsx
import { RenderView } from '@headon/react';
import './App.css';
function App() {
return (
<div className="App">
<RenderView name={'/home'}/>
</div>
);
}
export default App;Proceed to documentations