Skip to main content

​
Advanced Customization

Deeper customizations involving hooks, context, and utilities.

​
Modify Hooks

Components use hooks from the /hooks/ directory. You can customize these for advanced behavior changes.

​
Example: Change Default Sorting

// File: hooks/use-threaded-comments.tsx

const [sortBy, setSortBy] = useState('top');  // Change from 'best' to 'top'

​
Customize Context

Modify context providers for app-wide state changes. 
// File: context/ui-state-context.tsx

// Add custom state
const [customState, setCustomState] = useState(initialValue);

​
Add Custom Utilities

Create new utility files in the /utils/ directory for shared logic. 
// File: utils/analytics.ts

export const trackCommentEvent = (event: string, data: any) => {
  // Your analytics implementation
};

​
Integrate with Your Systems

Wire components to your existing systems:
  • Authentication
  • User profiles
  • Analytics
  • Error tracking
  • Custom APIs

​
Next Steps

Migration Guide

Migrate from npm packages

File Structure

Component organization