useQueryParamSheet

شیت جزئیاتی که مورد بازش در یک پارامتر URL می‌ماند — لینک مستقیم بازش می‌کند و «بازگشت» مرورگر می‌بندد

معرفی

هوک useQueryParamSheet شناسهٔ موردی را که در یک Sheet جزئیاتش دیده می‌شود، در یک پارامتر جست‌وجوی URL نگه می‌دارد (?id=42). لینک مستقیم شیت را باز می‌کند و دکمهٔ «بازگشت» مرورگر آن را می‌بندد.

جزئیاتِ باز در یک پارامتر خودش می‌رود؛ نمای فهرست (فیلترها، تب، بازه) اگر در نشانی بماند با useViewParams می‌رود، و متن تایپ‌شده و شمارهٔ صفحهٔ یک فید با مکان‌نما state کامپوننت می‌مانند.

چه زمانی استفاده کنیم

شیت جزئیات یک ردیف که باید با لینک قابل اشتراک باشد

چه زمانی استفاده نکنیم

کشوی موجودیت با J / K و بازگشت فوکوس — از useEntityDrawer استفاده کنید
فیلترها و نمای فهرست — useViewParams

استفاده

import { useQueryParamSheet } from '@partodata/ui/hooks/use-query-param-sheet'

function Accounts({ rows }) {
  const sheet = useQueryParamSheet('id')
  return (
    <>
      {rows.map((row) => (
        <Button key={row.id} variant="link" onClick={() => sheet.setValue(row.id)}>
          {row.name}
        </Button>
      ))}
      <Sheet open={sheet.open} onOpenChange={(open) => !open && sheet.setValue(null)}>
        <SheetContent>{sheet.value && <AccountDetail id={sheet.value} />}</SheetContent>
      </Sheet>
    </>
  )
}

بدون adapter از History API استفاده می‌شود که با Next.js App Router، react-router و صفحهٔ ساده کار می‌کند. برای روتر دیگر یک adapter بدهید.

پارامترها

پارامتر	نوع	توضیح
`key`	`string`	نام پارامتر URL (مثلاً `id`)
`options`	`UseQueryParamSheetOptions`	تنظیمات اختیاری