https://github.com/lessify/localess-react
Localess React Library. It provides a simple way to interact with the Localess API from your React application.
https://github.com/lessify/localess-react
Last synced: 7 months ago
JSON representation
Localess React Library. It provides a simple way to interact with the Localess API from your React application.
- Host: GitHub
- URL: https://github.com/lessify/localess-react
- Owner: Lessify
- License: mit
- Created: 2025-04-03T11:13:47.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-05-07T09:19:59.000Z (9 months ago)
- Last Synced: 2025-06-06T05:20:50.753Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
----
# Localess React
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.
## Installation
### NPM
````bash
npm install @localess/react
````
### Yarn
````bash
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
````tsx
import { llEditable, LocalessComponent } from "@localess/react";
const Header = ({data}) => {
return (
{data.items.map(item => )}
)
}
````
### Listen for Visual Editor Events
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 (
{data.body.map(item => )}
)
}
async function fetchData(locale?: string): Promise> {
const client = getLocalessClient(); // Get LocalessClient Initlialized before
return client.getContentBySlug('home', {locale: locale ? locale : undefined});
}
````