Skip to content

Instantly share code, notes, and snippets.

@kozo002

kozo002/App.tsx

Last active August 28, 2024 00:31
Show Gist options
  • Save kozo002/9ecb62e9685cb44a657533d1971925ed to your computer and use it in GitHub Desktop.
Save kozo002/9ecb62e9685cb44a657533d1971925ed to your computer and use it in GitHub Desktop.
Download ZIP
Example context implementation in qwik
Raw
App.tsx
import { component$, $, useStore, useContextProvider, createContextId, useContext, Slot } from "@builder.io/qwik";
export function createTab<T extends string[]>(tabKeys: T, initial?: T[number]) {
type TabStore = { activeKey: T[number] }
const TabContext = createContextId<TabStore>('Tab_' + tabKeys.join('_'));
const Tab = component$(() => {
const store = useStore({ activeKey: initial ?? tabKeys[0] })
useContextProvider(TabContext, store)
const handleClick = (key: T[number]) => {
return $(() => {
store.activeKey = key
})
}
return (
<div>
<div>
{tabKeys.map((key) => <button type="button" key={key} onClick$={handleClick(key)}>{key}</button>)}
</div>
<div>
<Slot />
</div>
</div>
)
})
const TabContent = component$(({ tabKey }: { tabKey: T[number] }) => {
const tab = useContext(TabContext)
if (tab.activeKey !== tabKey) {
return
}
return <Slot />
})
return { Tab, TabContent }
}
const { Tab, TabContent } = createTab(['tab1', 'tab2', 'tab3'] as const, 'tab2')
const { Tab: Tab2, TabContent: TabContent2 } = createTab(['a', 'b', 'c'] as const)
export default component$(() => {
return (
<div>
<Tab>
<TabContent tabKey="tab1">111111111111111111111</TabContent>
<TabContent tabKey="tab2">222222222222222</TabContent>
<TabContent tabKey="tab3">33333333333333333333333</TabContent>
</Tab>
<Tab2>
<TabContent2 tabKey="a">aaaaaaaaa</TabContent2>
<TabContent2 tabKey="b">bbbbbb</TabContent2>
<TabContent2 tabKey="c">cccc</TabContent2>
</Tab2>
</div>
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment