SolidJS•2w ago

Passing a component as a context value

I want to implement a dynamic sidebar which can show different content based on where you are in the component hierarchy. To achieve this I was trying to use the context API to supply the sidebar content. My goal was that descendants could either provide their own sidebar content or use one defined higher up in the hierarchy.

import { RouteSectionProps } from "@solidjs/router";
import { SidebarNavProvider } from "~/lib/shell";

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

export default function HomeLayout(props: RouteSectionProps) {
  return (
    <SidebarNavProvider sidebarNav={<SidebarNav />}>
      {props.children}
    </SidebarNavProvider>
  );
}

import { RouteSectionProps } from "@solidjs/router";
import { SidebarNavProvider } from "~/lib/shell";

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

export default function HomeLayout(props: RouteSectionProps) {
  return (
    <SidebarNavProvider sidebarNav={<SidebarNav />}>
      {props.children}
    </SidebarNavProvider>
  );
}

Trying something like this I keep getting hydration errors (see attached image). Is this not possible? Any alternative approaches to achieve my goal that you can think about?

14 Replies

Ho-kageOP•2w ago

The idea seems solid in my head 😄 Had to throw that pun in

Brendonovich•2w ago

What's SidebarNavProvider look like?

Ho-kageOP•2w ago

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

Brendonovich•2w ago

I think it's because value is evaluated in a different context than children usually are The element is probably being created in the provider but then mounted somewhere else and it's not happy

Ho-kageOP•2w ago

Hmmm. Any ideas for a workaround?

Brendonovich•2w ago

One option would be to provide it as an accessor, like sidebarNav={() => ...}

Ho-kageOP•2w ago

Let me try that

Brendonovich•2w ago

oh for a situation like this you may want to look into using a portal actually that'd let you properly portal your element from the page into the sidebar, then you'd use the context to provide the sidebar ref to the portal on the page

Ho-kageOP•2w ago

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. Mainly around the ref part 😅

Brendonovich•2w ago

The idea is you create a signal in the context, use the setter of the signal as the ref of the element you want to be the portal container, and then use the getter as the mount prop of the portal so that it knows where to put the element

Ho-kageOP•2w ago

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. 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 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. Oh wait. I think I may have misunderstood a small part here about the signal ‘in’ the context. Let me try that out

Brendonovich•2w ago

I think the Accessor approach would work with SSR, tbh the Portal approach may not even server render at all lol

Ho-kageOP•2w ago

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. 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);
}

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

Thanks for the help @Brendonovich

peerreynders•2w ago

Passing Solid's JSX.Element around routinely causes issues: https://discord.com/channels/722131463138705510/1238643925988937820 () => JSX.Element is less an accessor but a means of delaying rendering/execution, i.e. not creating the instance until it is at its final destination (with the supporting environment).

Gaming

Programming

Passing a component as a context value

Did you find this page helpful?