​
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]);
}