@headlessly/react

npm install @headlessly/react @headlessly/db

import { HeadlesslyProvider } from '@headlessly/react'

function App() {
  return (
    <HeadlesslyProvider
      apiKey={process.env.NEXT_PUBLIC_HEADLESSLY_KEY}
      app="crm"
    >
      <YourApp />
    </HeadlesslyProvider>
  )
}

import { useCollection } from '@headlessly/react'

function ContactList() {
  const { data, loading, error, refetch } = useCollection('Contact', {
    filter: { status: { $eq: 'active' } },
    limit: 25,
    sort: '-lastEngagement',
  })

  if (loading) return <Spinner />
  if (error) return <Error message={error.message} />

  return (
    <ul>
      {data.map(contact => (
        <li key={contact.id}>{contact.name} - {contact.email}</li>
      ))}
    </ul>
  )
}

import { useEntity } from '@headlessly/react'

function ContactProfile({ id }: { id: string }) {
  const { data: contact, loading } = useEntity('Contact', id)

  if (loading || !contact) return <Spinner />

  return (
    <div>
      <h1>{contact.name}</h1>
      <p>{contact.email}</p>
      <span>Stage: {contact.stage}</span>
    </div>
  )
}

import { useMutation } from '@headlessly/react'

function CreateContactForm() {
  const { mutate, loading, error } = useMutation('Contact', 'create')

  const handleSubmit = async (data: ContactData) => {
    const result = await mutate(data)
    console.log('Created:', result.id)
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button disabled={loading}>Create Contact</button>
      {error && <p className="text-red-500">{error.message}</p>}
    </form>
  )
}

import { useFeatureFlag } from '@headlessly/react'

function Dashboard() {
  const showNewChart = useFeatureFlag('new-analytics-chart')

  return showNewChart ? <NewChart /> : <LegacyChart />
}

import { useAnalytics } from '@headlessly/react'

function PricingPage() {
  const { track } = useAnalytics()

  return (
    <button onClick={() => track('plan_selected', { plan: 'pro' })}>
      Select Pro Plan
    </button>
  )
}