@localess/react 0.8.1-next.20250501-095727.0 → 0.8.1-next.20250615-170738.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<br/>
|
|
2
|
+
<br/>
|
|
3
|
+
<img src="https://github.com/Lessify/localess/wiki/img/logo-adaptive.svg" alt="logo">
|
|
4
|
+
<br/>
|
|
5
|
+
<br/>
|
|
6
|
+
|
|
7
|
+
----
|
|
8
|
+
|
|
9
|
+
# Localess React
|
|
10
|
+
|
|
11
|
+
This client SDK is designed to work with the Localess API. It provides a simple way to interact with the Localess API from your React application.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
### NPM
|
|
16
|
+
````bash
|
|
17
|
+
npm install @localess/react
|
|
18
|
+
````
|
|
19
|
+
|
|
20
|
+
### Yarn
|
|
21
|
+
````bash
|
|
22
|
+
yarn add @localess/react
|
|
23
|
+
````
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
### Initialize and Visual Editor
|
|
28
|
+
````tsx
|
|
29
|
+
import { localessInit } from "@localess/react";
|
|
30
|
+
import { Page, Header, Teaser, Footer } from "@/components"
|
|
31
|
+
|
|
32
|
+
localessInit({
|
|
33
|
+
origin: "https://my-localess.web.app",
|
|
34
|
+
spaceId: "I1LoVe2LocaLess4Rever",
|
|
35
|
+
token: "Baz00KaT0KeN8S3CureLL",
|
|
36
|
+
enableSync: true, //Enable Visual Editor Sync Script,
|
|
37
|
+
components: {
|
|
38
|
+
'page': Page,
|
|
39
|
+
'header': Header,
|
|
40
|
+
'teaser': Teaser,
|
|
41
|
+
'footer': Footer,
|
|
42
|
+
},
|
|
43
|
+
})
|
|
44
|
+
````
|
|
45
|
+
|
|
46
|
+
### React Component
|
|
47
|
+
Example of Header Component with Menu Items
|
|
48
|
+
|
|
49
|
+
````tsx
|
|
50
|
+
import { llEditable, LocalessComponent } from "@localess/react";
|
|
51
|
+
|
|
52
|
+
const Header = ({data}) => {
|
|
53
|
+
return (
|
|
54
|
+
<nav {...llEditable(data)}>
|
|
55
|
+
{data.items.map(item => <LocalessComponent key={item._id} data={item} />)}
|
|
56
|
+
</nav>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
````
|
|
60
|
+
|
|
61
|
+
### Listen for Visual Editor Events
|
|
62
|
+
Your application can subscribe to the Localess Visual Editor Events.
|
|
63
|
+
Example from NextJS 15
|
|
64
|
+
|
|
65
|
+
````tsx
|
|
66
|
+
import { llEditable, LocalessComponent, getLocalessClient } from "@localess/react";
|
|
67
|
+
|
|
68
|
+
export default async function Page({searchParams}: {
|
|
69
|
+
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
|
|
70
|
+
}) {
|
|
71
|
+
const {locale} = await searchParams
|
|
72
|
+
const {data} = await fetchData(locale?.toString());
|
|
73
|
+
const [ pageData, setPageData ] = useState(data);
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
if (window.localess) {
|
|
77
|
+
window.localess.on(['input', 'change'], (event) => {
|
|
78
|
+
if (event.type === 'input' || event.type === 'change') {
|
|
79
|
+
setPageData(event.data);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
return (
|
|
84
|
+
<main {...llEditable(data)}>
|
|
85
|
+
{data.body.map(item => <LocalessComponent key={item._id} data={item} />)}
|
|
86
|
+
</main>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
async function fetchData(locale?: string): Promise<Content<Page>> {
|
|
91
|
+
const client = getLocalessClient(); // Get LocalessClient Initlialized before
|
|
92
|
+
return client.getContentBySlug<Page>('home', {locale: locale ? locale : undefined});
|
|
93
|
+
}
|
|
94
|
+
````
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@localess/react",
|
|
3
|
-
"version": "0.8.1-next.
|
|
3
|
+
"version": "0.8.1-next.20250615-170738.0",
|
|
4
4
|
"description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"localess",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": "^17 || ^18 || ^19"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@localess/js-client": "0.8.0"
|
|
47
|
+
"@localess/js-client": "0.8.2-next.20250615-165147.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/react": "18.3.12",
|