Create an independent View and subscribe to it. Returns the same ViewHandle as useView, but backed by a newly created view with its own branch selections and pagination state. Use when one component needs a view distinct from the transport's default view — typically a split-pane comparison UI or a sidebar that follows a different branch.
The view is closed on unmount or when the transport changes.
This hook must be used within a TransportProvider or a ChatTransportProvider.
React
1
2
3
4
5
6
7
import { useCreateView } from '@ably/ai-transport/react';
function ComparisonPane() {
const left = useCreateView({ limit: 30 });
const right = useCreateView({ limit: 30 });
// Each view has its own select() state — render two branches side by side.
}Parameters
transportoptionalClientTransport<TEvent, TMessage> or NullTransport to create a view from. Defaults to the nearest provider when omitted.
limitoptionalNumberMaximum number of older messages to load per page. When provided, auto-loads the first page on mount.
skipoptionalBooleanWhen
true, skip view creation and return an empty handle.Returns
ViewHandle<TEvent, TMessage>
The same shape as useView. See that page for the full property and method list.
Example
React
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useCreateView } from '@ably/ai-transport/react';
function SplitPane({ messageId }) {
const left = useCreateView({ limit: 30 });
const right = useCreateView({ limit: 30 });
// Show the two siblings of a regenerate side by side.
const siblings = left.getSiblings(messageId);
if (siblings.length >= 2) {
left.select(messageId, 0);
right.select(messageId, 1);
}
return (
<div className="split">
<Pane title="Version A" view={left} />
<Pane title="Version B" view={right} />
</div>
);
}