diff --git a/src/components/Welcome/Welcome.test.tsx b/src/components/Welcome/Welcome.test.tsx
index c6f223c1..4e1511c6 100644
--- a/src/components/Welcome/Welcome.test.tsx
+++ b/src/components/Welcome/Welcome.test.tsx
@@ -1,5 +1,6 @@
import { fireEvent, render } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
+import { ConfigProvider } from '../../hooks/useConfig.js'
import Welcome from './Welcome.js'
describe('Welcome Component', () => {
@@ -64,4 +65,18 @@ describe('Welcome Component', () => {
fireEvent.keyDown(window, { key: 'Enter' })
expect(onClose).not.toHaveBeenCalled()
})
+
+ it('renders custom content and button text', () => {
+ const onClose = vi.fn()
+ const customContent =
Custom welcome message
+ const customButtonText = 'Custom Got it'
+ const { getByText } = render(
+
+
+
+ )
+
+ expect(getByText('Custom welcome message')).toBeDefined()
+ expect(getByText('Custom Got it')).toBeDefined()
+ })
})
diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx
index b7db76e7..659fdcb3 100644
--- a/src/components/Welcome/Welcome.tsx
+++ b/src/components/Welcome/Welcome.tsx
@@ -12,7 +12,7 @@ interface WelcomePopupProps {
* Clicking outside the popup or pressing Escape will dismiss it.
*/
export default function Welcome({ onClose }: WelcomePopupProps) {
- const { customClass } = useConfig()
+ const { customClass, welcome } = useConfig()
// Close popup when clicking outside
function handleBackdropClick(e: MouseEvent) {
if (e.target === e.currentTarget) {
@@ -35,18 +35,20 @@ export default function Welcome({ onClose }: WelcomePopupProps) {
return (
-
npx hyperparam
-
+ {welcome?.content ?? <>
+
npx hyperparam
+
This is the Hyperparam cli for local data viewing.
-
-
+
+
This tool lets you browse and explore large datasets particularly in parquet format.
-
-
+
+
Supported file types include Parquet, CSV, JSON, Markdown, and Text.
-
+
+ >}
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
index bca51bc2..6cb6d4c2 100644
--- a/src/hooks/useConfig.ts
+++ b/src/hooks/useConfig.ts
@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { ReactNode, createContext, useContext } from 'react'
/**
* Config is a flat object of key-value pairs.
@@ -37,6 +37,10 @@ export interface Config {
minWidth?: number
defaultWidth?: number
}
+ welcome?: {
+ content?: ReactNode
+ buttonText?: string
+ }
}
const ConfigContext = createContext({})