Versions

Simplified way to modify wireframe subcomponents

You can now modify subcomponent wireframes using two patterns:

In this example, we modify the Header subcomponent, which is a subcomponent of the Velt Comment Dialog. In this pattern, we just put the Header subcomponent in the root of <VeltWireframe /> and modify it. We do not need to add its parent component or any of its siblings.

Example:

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentsSidebarWireframe.CloseButton/>
        <VeltCommentsSidebarWireframe.Search/>
        <VeltCommentsSidebarWireframe.Status/>
        <VeltCommentsSidebarWireframe.FilterButton/>
    </VeltCommentsSidebarWireframe.Header>
</VeltWireframe>

In this example, we modify the Header subcomponent, which is a subcomponent of the Velt Comment Dialog component. In this pattern, we include its parent component and siblings. This makes it easier to modify several sibling components at once.

Example:

<VeltWireframe>
   <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        ...
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header */}
            <VeltCommentsSidebarWireframe.Header>
                <div>
                    Custom HTML
                </div>
                <VeltCommentsSidebarWireframe.CloseButton/>
                <VeltCommentsSidebarWireframe.Search/>
                <VeltCommentsSidebarWireframe.Status/>
                <VeltCommentsSidebarWireframe.FilterButton/>
            </VeltCommentsSidebarWireframe.Header>
            {/* Filter */}
            ...
            {/* List */}
            <VeltCommentsSidebarWireframe.List/>
            {/* Empty Placeholder */}
            ...
            {/* Page Mode Composer */}
            ...
        <VeltCommentsSidebarWireframe.Panel/>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>
If you modify the component in both the Parentless and With Parent pattern, the With Parent pattern will override the Parentless pattern.

Detect if Velt SDK is initialized

To detect if the Velt SDK is initialized, subscribe using the following method:

let subscription = client.getVeltInitState().subscribe((veltInitState: boolean | undefined) => {
	console.log('Velt Init State:', veltInitState);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

You can also the use useVeltInitState() hook:

import { useVeltInitState } from '@veltdev/react';

function YourComponent() {
    const veltInitState = useVeltInitState();
    useEffect(() => {
        console.log('Velt Init State:', veltInitState);
        if (veltInitState) {
            // Velt state is initialized, so user can perform any action here
        }
    }, [veltInitState]);
}