TIDE • Memulai

Getting Started

Install @uikode/tide and render real-time data in three steps.

Getting Started

Install @uikode/tide and render real-time data in three steps.

Install

Bash

npm install @uikode/tide solid-js

Tide has a single peer dependency: solid-js. Total footprint is 2.8KB gzipped (core + skeleton).

1. Wrap your app

Wrap your root with TideProvider. WebSocket is optional — omit ws for HTTP-only stale-while-revalidate.

tsx

import { TideProvider } from '@uikode/tide'

function Root() {
  return (
    <TideProvider ws={{ url: 'wss://your-server/ws' }}>
      <App />
    </TideProvider>
  )
}

2. Fetch data in a component

createTide takes an options object. Use the url shorthand (recommended) or provide a custom fetcher. Add ws or wsPath for real-time pushes.

tsx

import { createTide } from '@uikode/tide'

// url shorthand (recommended)
const todos = createTide({
  key: 'todos',
  url: '/api/todos',
  wsPath: 'data.todos',  // auto-extract from WS message
})

// legacy — custom fetcher (still supported)
const todos = createTide({
  key: 'todos',
  fetcher: ({ signal }) =>
    fetch('/api/todos', { signal }).then((r) => r.json()),
  ws: (msg) => (msg.type === 'todos' ? msg.data : null),
})

3. Render reactively

data is a SolidJS accessor — call it in JSX. On revisit it renders instantly from sessionStorage (0ms), then refreshes in the background.

tsx

<Show when={!todos.loading()} fallback={<Skeleton />}>
  <For each={todos.data()}>{(t) => <Todo item={t} />}</For>
</Show>

That's it. WebSocket transport, caching, reconnection, and skeletons are all handled.