skills.rest
arqel-dev
arqel-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

@arqel-dev/hooks

Provide reusable React hooks for Inertia-based resource pages.

2|Updated Apr 17, 2026
Search Tags:#react#hooks#forms#laravel#tables#inertia#resource
One-click install
npx skills add https://github.com/arqel-dev/arqel --skill arqel-dev-hooks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: @arqel-dev/hooks
Source: https://github.com/arqel-dev/arqel/tree/main/packages-js/hooks
Command: npx skills add https://github.com/arqel-dev/arqel --skill arqel-dev-hooks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a collection of reusable React hooks to simplify building Inertia-based Resource pages in Arqel, merging page props with ResourceContext and common UI state, reducing boilerplate and ensuring consistent behavior.

Core Features & Use Cases

  • useResource<T>() for merged page props and ResourceContext
  • useArqelForm({ fields, record, defaults }) as a drop-in wrapper around Inertia's useForm
  • useCanAccess(ability, record?) for UX-only access checks
  • useFlash({ onMessage }) for one-shot flash callbacks
  • useTable({ defaultSort, defaultFilters, defaultSelection }) for local state
  • useAction(action) to dispatch via Inertia router
  • useFieldDependencies({ fields, values, debounceMs }) for debounced field option reload
  • useNavigation() for derived navigation items
  • useBreakpoint() SSR-safe tailwind breakpoint
  • useArqelOptimistic() alias to useOptimistic
  • useResourceUpdates() for real-time resource updates
  • useResourceUpdates() — subscribes to server updates and triggers partial reloads

Quick Start

Install and integrate the hooks library into your Arqel app by importing from @arqel-dev/hooks and wiring into Resource pages.

Frequently Asked Questions about @arqel-dev/hooks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce boilerplate when building Inertia resource pages in React?▼

To create and manage forms in Inertia React apps, use a drop-in wrapper hook around Inertia's useForm that accepts field definitions, existing records, and default values to streamline form state initialization and submission.

Can I perform client-side access checks before showing actions in a React admin panel?▼

Yes, you can perform UX-only access checks in your React admin panel using a dedicated hook that evaluates user abilities against specific records to conditionally render UI elements without relying on server round-trips.

How do I handle real-time resource updates in an Inertia.js application?▼

You can handle real-time resource updates in an Inertia.js application by subscribing to server updates via a React hook that automatically triggers partial reloads to refresh page props without full page transitions.

Does this React hooks collection require specific framework versions to function?▼

Yes, these React hooks require TypeScript, Inertia v3, and React 19 or higher to function properly, and they also depend on related packages like @arqel-dev/react and @inertiajs/react for full integration.

What is the best way to manage local table state like sorting and filters in React?▼

The best way to manage local table state in React is using a dedicated hook that initializes default sort orders, filter configurations, and row selections, keeping table interactions isolated from global page state.

Related Skills

Explore More Software Engineering Skills→
markhamsquareventuresmarkhamsquareventures

react

Create typed React components with Inertia props for Laravel projects.

Official
Intermediate
AgentientAgentient
2

firebase-nextjs-integration-strategies

Enforce a server/client boundary between Firebase Client and Admin SDKs in Next.js App Router.

Official
Advanced
arqel-devarqel-dev
2

arqel-dev/fields-advanced

Configure advanced Arqel field types for Laravel CMS forms.

Official
Advanced
majesticlabs-devmajesticlabs-dev
47

inertia-coder

Set up Inertia.js with Rails and build page components in React, Vue, or Svelte.

Official
Advanced