Ho-kage Comments - Answer Overflow

Ho-kage

Explore posts from servers

SSolidJS TTCTheo's Typesafe Cult BABetter Auth

Posts Comments

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Thanks for the help @Brendonovich

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Home layout:

import { RouteSectionProps } from "@solidjs/router";
import { onMount } from "solid-js";
import { ContextNavProvider, setContextNav } from "~/lib/shell";

function SidebarNav() {
  return (
    <div>
      <div>Dashboard</div>
      <div>Modules</div>
      <div>Profile</div>
    </div>
  );
}

export default function HomeLayout(props: RouteSectionProps) {
  const contextNav = () => <SidebarNav />;

  onMount(() => {
    setContextNav(contextNav());
  });

  return (
    <ContextNavProvider contextNav={contextNav}>
      {props.children}
    </ContextNavProvider>
  );
}

import { RouteSectionProps } from "@solidjs/router";
import { onMount } from "solid-js";
import { ContextNavProvider, setContextNav } from "~/lib/shell";

function SidebarNav() {
  return (
    <div>
      <div>Dashboard</div>
      <div>Modules</div>
      <div>Profile</div>
    </div>
  );
}

export default function HomeLayout(props: RouteSectionProps) {
  const contextNav = () => <SidebarNav />;

  onMount(() => {
    setContextNav(contextNav());
  });

  return (
    <ContextNavProvider contextNav={contextNav}>
      {props.children}
    </ContextNavProvider>
  );
}

Actual Usage:

import { JSX, Show } from "solid-js";
import { ShellCrumbs } from "./shell-crumbs";
import { ShellHeader } from "./shell-header";
import { contextMenuOpen, contextNav, navigationOpen } from "~/lib/shell";

type ShellProps = {
  children: JSX.Element;
};

export function Shell(props: ShellProps) {
  return (
    <div class="flex h-dvh flex-col">
      <ShellHeader />
      <div class="flex flex-1 flex-col">
        <Show when={navigationOpen()}>
          <ShellCrumbs />
        </Show>
        <div class="flex flex-1">
          <Show when={navigationOpen() && contextMenuOpen()}>
            <div class="w-60 border-r p-4">
              <Show when={contextNav()}>{contextNav()}</Show>
            </div>
          </Show>
          <div>{props.children}</div>
        </div>
      </div>
    </div>
  );
}

import { JSX, Show } from "solid-js";
import { ShellCrumbs } from "./shell-crumbs";
import { ShellHeader } from "./shell-header";
import { contextMenuOpen, contextNav, navigationOpen } from "~/lib/shell";

type ShellProps = {
  children: JSX.Element;
};

export function Shell(props: ShellProps) {
  return (
    <div class="flex h-dvh flex-col">
      <ShellHeader />
      <div class="flex flex-1 flex-col">
        <Show when={navigationOpen()}>
          <ShellCrumbs />
        </Show>
        <div class="flex flex-1">
          <Show when={navigationOpen() && contextMenuOpen()}>
            <div class="w-60 border-r p-4">
              <Show when={contextNav()}>{contextNav()}</Show>
            </div>
          </Show>
          <div>{props.children}</div>
        </div>
      </div>
    </div>
  );
}

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Context provider stuffs:

import {
  Accessor,
  createContext,
  createSignal,
  JSX,
  useContext,
} from "solid-js";

export const [navigationOpen, setNavigationOpen] = createSignal(false);
export const [contextMenuOpen, setContextMenuOpen] = createSignal(true);
export const [contextNav, setContextNav] = createSignal<JSX.Element | null>(
  null,
);

const ContextNavContext = createContext<Accessor<JSX.Element>>();

export const ContextNavProvider = (props: {
  contextNav: Accessor<JSX.Element>;
  children: JSX.Element;
}) => {
  return (
    <ContextNavContext.Provider value={props.contextNav}>
      {props.children}
    </ContextNavContext.Provider>
  );
};

export function useContextNav() {
  return useContext(ContextNavContext);
}

import {
  Accessor,
  createContext,
  createSignal,
  JSX,
  useContext,
} from "solid-js";

export const [navigationOpen, setNavigationOpen] = createSignal(false);
export const [contextMenuOpen, setContextMenuOpen] = createSignal(true);
export const [contextNav, setContextNav] = createSignal<JSX.Element | null>(
  null,
);

const ContextNavContext = createContext<Accessor<JSX.Element>>();

export const ContextNavProvider = (props: {
  contextNav: Accessor<JSX.Element>;
  children: JSX.Element;
}) => {
  return (
    <ContextNavContext.Provider value={props.contextNav}>
      {props.children}
    </ContextNavContext.Provider>
  );
};

export function useContextNav() {
  return useContext(ContextNavContext);
}

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

So what I ended up doing was providing the sidebar to the context as an acessor, but only setting it onMount so that I don't have hydrations errors where it is being used.

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Oh wait. I think I may have misunderstood a small part here about the signal ‘in’ the context. Let me try that out

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Since the id would be a string it would probably not run into the hydration issues. But my original idea was cool. Sad it didn't work. I guess it would work if I wasn't using SSR.

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

But I guess I could work around that by doing something like: - Setup a store for sidebars which are indexed by some id - Provide the id in the context - Use the id for looking up the correct sidebar to show - Then children can add sidebars with a unique id

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

I think that part is similar to my current plan of displaying the actual sidebar content. The thing I was trying to solve with the context is to get the nearest fallback sidebar from the hierarchy if the current nested page does not provide its own.

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Mainly around the ref part 😅

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

That sounds like a plan... I'm still a bit new to solid so I'm gonna have to look up the various pieces. I don't necessarily want to burden you with providing an example snippet.

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Let me try that

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

Hmmm. Any ideas for a workaround?

24 replies

SSolidJS

•Created by Ho-kage on 3/22/2025 in #support

Passing a component as a context value

import { createContext, createSignal, JSX, useContext } from "solid-js";

export const [navigationOpen, setNavigationOpen] = createSignal(false);
export const [contextMenuOpen, setContextMenuOpen] = createSignal(false);

const SidebarNavContext = createContext<JSX.Element>();

export const SidebarNavProvider = (props: {
  sidebarNav: JSX.Element;
  children: JSX.Element;
}) => {
  return (
    <SidebarNavContext.Provider value={props.sidebarNav}>
      {props.children}
    </SidebarNavContext.Provider>
  );
};

export function useSidebarNav() {
  return useContext(SidebarNavContext);
}

import { createContext, createSignal, JSX, useContext } from "solid-js";

export const [navigationOpen, setNavigationOpen] = createSignal(false);
export const [contextMenuOpen, setContextMenuOpen] = createSignal(false);

const SidebarNavContext = createContext<JSX.Element>();

export const SidebarNavProvider = (props: {
  sidebarNav: JSX.Element;
  children: JSX.Element;
}) => {
  return (
    <SidebarNavContext.Provider value={props.sidebarNav}>
      {props.children}
    </SidebarNavContext.Provider>
  );
};

export function useSidebarNav() {
  return useContext(SidebarNavContext);
}