React

React is a JavaScript library developed by Meta for building user interfaces, especially single-page applications (SPAs). It uses a component-based architecture and a virtual DOM for efficient rendering and state management.

Library

Localess provides an Angular Library @localess/react that should help to integrate with the API and Visual Editor.

Bash

# NPM
npm install @localess/react
# YARN
yarn add @localess/react
# PNPM
pnpm add @localess/react

Initialize and Visual Editor

TypeScript

import { localessInit } from "@localess/react";
import { Page, Header, Teaser, Footer } from "@/components"

localessInit({
  origin: "https://my-localess.web.app",
  spaceId: "I1LoVe2LocaLess4Rever",
  token: "Baz00KaT0KeN8S3CureLL",
  enableSync: true, //Enable Visual Editor Sync Script,
  components: {
    'page': Page,
    'header': Header,
    'teaser': Teaser,
    'footer': Footer,
  },
})

React Component

Example of Header Component with Menu Items

TypeScript

import { llEditable, LocalessComponent } from "@localess/react";

const Header = ({data}) => {
  return (
    <nav {...llEditable(data)}>
      {data.items.map(item => <LocalessComponent key={item._id} data={item} />)}
    </nav>
  )
}

Listen for Events

Your application can subscribe to the Localess Visual Editor Events :

TypeScript

import { llEditable, LocalessComponent, getLocalessClient } from "@localess/react";

export default async function Page({searchParams}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const {locale} = await searchParams
  const {data} = await fetchData(locale?.toString());
  const [ pageData, setPageData ] = useState(data);
  
  
  if (window.localess) {
    window.localess.on(['input', 'change'], (event) => {
      if (event.type === 'input' || event.type === 'change') {
        setPageData(event.data);
      }
    });
  }
  return (
    <main {...llEditable(data)}>
      {data.body.map(item => <LocalessComponent key={item._id} data={item} />)}
    </main>
  )
}

async function fetchData(locale?: string): Promise<Content<Page>> {
  const client = getLocalessClient(); // Get LocalessClient Initlialized before
  return client.getContentBySlug<Page>('home', {locale: locale ? locale : undefined});
}