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

Was this page helpful?

June 6 2024May 24 2024