Search documentation

Search documentation

Hook@pillar-ai/react

usePillar()

Hook to access the Pillar SDK instance and state

typescript
import { usePillar } from '@pillar-ai/react'

Signature

typescript
function usePillar<TActions extends SyncActionDefinitions | ActionDefinitions = SyncActionDefinitions>(): TypedUsePillarResult<TActions>

Return Value

Return Value

pillar
requiredPillarContextValue['pillar']
No description.
onTask
required<TName extends ActionNames<TActions>>( taskName: TName, handler: (data: ActionDataType<TActions, TName>) => void ) => () => void
Type-safe task handler registration.

Returns

TypedUsePillarResult

Examples

tsx
function MyComponent() {
const { isReady, open, close, isPanelOpen } = usePillar();


if (!isReady) return <div>Loading...</div>;


return (
<button onClick={() => open()}>
{isPanelOpen ? 'Close Help' : 'Get Help'}
</button>
);
}
tsx
import { actions } from '@/lib/pillar/actions';


function MyComponent() {
const { pillar, onTask } = usePillar<typeof actions>();


useEffect(() => {
// TypeScript knows data has { type, url, name }
const unsub = onTask('add_new_source', (data) => {
console.log(data.url); // ✓ Typed!
});
return unsub;
}, [onTask]);
}
Source: packages/sdk-react/src/hooks/usePillar.ts