@cleanbill/slink-sdk

A standalone React library for GZIP-compressed synchronization with the Slink backend.

Features

• GZIP Compression: Efficient data sync using browser-native CompressionStream.
• React Drop-in: Polished SlinkSync component with centered token input and interactive hover effects.
• Secure Communication: Handles base64 encoding and structured SyncData payloads for backend compatibility.

Installation

npm install @mick.carter/slink-sdk

Usage

SlinkSync Component

The easiest way to integrate sync into your React app:

import { SlinkSync } from '@mick.carter/slink-sdk';

const MyComponent = () => {
    return (
        <SlinkSync 
            overwriteData={(data) => {
                console.log("Saving new data", data);
                return true;
            }}
            data={currentAppData}
            name="my-app"
            baseUrl="https://your-slink-backend.com/"
        />
    );
}

Hint to avoid CORS problems in Next.js... use next.config.mjs to rewrite the API calls to your slink backend.

/** @type {import('next').NextConfig} */
const nextConfig = {
    rewrites() {
        const rws = [
            {
                source: "/local-sync",
                destination: "https://slink.your-backend.com/locals/",
            },
        ];
        console.log('Rewrites', rws);
        return rws;
    },
}

export default nextConfig;

SlinkClient (Low-level API)

If you need to manage communication manually:

import { SlinkClient } from '@mick.carter/slink-sdk';

const client = new SlinkClient("https://your-slink-backend.com/", "your-api-token");
const data = await client.get();
await client.put({ some: "data" });

See https://github.com/cleanbill/slink for an example of a slink backend.