> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# May 29 2024

## Versions

* Latest SDK: [1.0.137](https://www.npmjs.com/package/@veltdev/react)
* Latest Types: [1.0.157](https://www.npmjs.com/package/@veltdev/types)

## Simplified way to modify wireframe subcomponents

You can now modify subcomponent wireframes using two patterns:

#### a. `Parentless` - Modifying the subcomponent without its parent within the `<VeltWireframe />` component. (recommended)

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:

```jsx theme={null}
<VeltWireframe>
    <VeltCommentsSidebarWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentsSidebarWireframe.CloseButton/>
        <VeltCommentsSidebarWireframe.Search/>
        <VeltCommentsSidebarWireframe.Status/>
        <VeltCommentsSidebarWireframe.FilterButton/>
    </VeltCommentsSidebarWireframe.Header>
</VeltWireframe>
```

#### a. `With Parent` - Modifying the subcomponent within the context of its parent within the `<VeltWireframe />` component. (not recommended)

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:

```jsx theme={null}
<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>
```

<Note> If you modify the component in both the `Parentless` and `With Parent` pattern, the `With Parent` pattern will override the `Parentless` pattern. </Note>

## Detect if Velt SDK is initialized

[To detect if the Velt SDK is initialized](/get-started/advanced), subscribe using the following method:

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

To unsubscribe from the subscription:

```jsx theme={null}
subscription?.unsubscribe()
```

You can also the use `useVeltInitState()` hook:

```jsx theme={null}
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]);
}

```