React SDK reference

import { ReleaseNotes } from '@makershq/react'
import '@makershq/react/styles.css'

export function InstalledRelease() {
  return (
    <ReleaseNotes
      projectId="YOUR_PROJECT_ID"
      version="1.2.3+desktop.7"
      theme="dark"
    />
  )
}

import { useState } from 'react'
import { ReleaseMarkdown, useReleaseNotesReader } from '@makershq/react'

export function CustomJournal({ projectId }: { projectId: string }) {
  const [version, setVersion] = useState<string | undefined>('1.2.3')
  const notes = useReleaseNotesReader({ projectId, version })
  return (
    <section>
      {version && (
        <button onClick={() => setVersion(undefined)}>All releases</button>
      )}
      {notes.loading && <p role="status">Loading…</p>}
      {notes.cached && <p role="status">Saved copy</p>}
      {notes.error && !notes.cached && (
        <p role="alert">
          {notes.unavailable ? 'Notes unavailable.' : 'Could not load notes.'}
        </p>
      )}
      {notes.error && !notes.unavailable && (
        <button onClick={notes.retry}>Try again</button>
      )}
      {notes.page?.items.map((release) => (
        <article key={release.id}>
          <h2>{release.version ?? release.title}</h2>
          <ReleaseMarkdown projectId={projectId} release={release} />
        </article>
      ))}
      {!notes.cached && !notes.error && notes.page?.nextCursor && (
        <button
          disabled={notes.loadingMore}
          onClick={() => void notes.loadMore()}
        >
          More
        </button>
      )}
    </section>
  )
}

import { useEffect } from 'react'
import { useWebsiteUpdates, type WebsiteBuild } from '@makershq/react'

export function CustomNotifications({
  projectId,
  currentBuild,
}: {
  projectId: string
  currentBuild: WebsiteBuild
}) {
  const updates = useWebsiteUpdates({ projectId, currentBuild })
  useEffect(() => {
    if (updates.displayedRelease) updates.onReleaseRendered()
  }, [updates.displayedRelease, updates.onReleaseRendered])
  if (updates.displayedRelease)
    return (
      <aside aria-label="What changed">
        <h2>{updates.displayedRelease.title}</h2>
        <a
          href={updates.displayedRelease.url}
          target="_blank"
          rel="noopener noreferrer"
          onClick={updates.dismissRelease}
        >
          Read release
        </a>
        <button onClick={updates.dismissRelease}>Dismiss</button>
      </aside>
    )
  if (!updates.candidate) return null
  return (
    <aside aria-label="New deployment">
      {updates.error && <p role="alert">{updates.error}</p>}
      <button
        disabled={updates.refreshing}
        onClick={() => void updates.refresh()}
      >
        Refresh
      </button>
      <button disabled={updates.refreshing} onClick={updates.dismissCandidate}>
        Later
      </button>
    </aside>
  )
}