@localess/react 0.8.1-next.20250501-100712.0 → 0.8.1-next.20250625-100209.0

package/README.md

@@ -24,10 +24,71 @@ yarn add @localess/react
 
 ## Usage
 
+### Initialize and Visual Editor
+````tsx
+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
 
-### Visual Editor Enable
-TODO
+````tsx
+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 Visual Editor Events
-TODO
+Your application can subscribe to the Localess Visual Editor Events.
+Example from NextJS 15
+
+````tsx
+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});
+}
+````

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localess/react",
-  "version": "0.8.1-next.20250501-100712.0",
+  "version": "0.8.1-next.20250625-100209.0",
   "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
   "keywords": [
     "localess",
@@ -44,7 +44,7 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@localess/js-client": "0.8.0"
+    "@localess/js-client": "0.8.2-next.20250625-092814.0"
   },
   "devDependencies": {
     "@types/react": "18.3.12",