Custom Hooks

Sitepins utilizes a variety of custom React hooks to encapsulate business logic and provide a clean abstraction for components.

Git & Provider Hooks

useGitProvider

This is the most critical hook for repository interactions. It abstracts the differences between GitHub and GitLab, providing a unified interface for file operations.

const { updateFiles, deleteFile, useGitContent } = useGitProvider();
 
// Usage
await updateFiles({
  files: [{ path: "hello.md", content: "# Hi" }],
  message: "Commit message"
});

useGitAuth

Manages the authentication state for the active Git provider and handles the redirect flow for app installations.

State & Validation Hooks

useIsChanged

Tracks whether the current form or editor state has unsaved changes compared to the version on Git. It is used to trigger “Unsaved Changes” warnings.

useCommitLogic

Encapsulates the multi-step process of preparing a Git commit, including stripping temporary IDs, validating schema constraints, and triggering the mutation.

UI & Utility Hooks

• useDialog: A standardized wrapper for managing Shadcn/ui dialog states.
• useMediaQuery: Responsive design helper for detecting screen sizes in JS.
• useDebounce / useDebounceCallback: Used extensively in search inputs and the auto-saving mechanism.
• useSnippets: Manages the local and remote template snippets available to the user.