npm package
Use the @geo/sdk core package in React, Vue or any frontend project.
npm i @geo/sdkInitialize
import { geo } from '@geo/sdk';
geo.init({
site: 'pk_live_xxxxxxxx',
locale: 'auto',
mode: 'fill',
spa: true,
events: true,
});Core API
| Method | Description |
|---|---|
geo.init(options) | Initialize and fetch the config for the current path |
geo.set(variables) | Register page variables and re-render the head |
geo.page(path?, locale?) | Notify a route change manually (when spa is off) |
geo.on(event, handler) | Subscribe to ready / rulematch / error |
geo.destroy() | Remove listeners and restore the original head |
React adapter
import { GeoProvider, useGeoVariables } from '@geo/sdk-react';
export function App() {
return (
<GeoProvider site="pk_live_xxxxxxxx">
<Article />
</GeoProvider>
);
}
function Article({ post }) {
useGeoVariables({ title: post.title, summary: post.summary, author: post.author });
return <article>…</article>;
}Server-side rendering (generic Node)
import { renderHead, fetchConfig } from '@geo/sdk/server';
const config = await fetchConfig({ site: 'pk_live_xxxxxxxx', path: req.path, locale: 'en' });
const headHtml = renderHead(config, { title: post.title, summary: post.summary });
// insert headHtml into your template's <head>renderHead() is a pure function shared by browser and server, so hydration stays consistent.