How do i conditionally add something to <head> based on what createAsync returns?

I need to wait for a resource coming from

createAsync

createAsync

so then i can decide whether i should add google recaptcha to <head> using

useHead

useHead

from @solidjs/meta

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  if (!chat())
    useHead({
      tag: "script",
      id: "recaptcha",
      setting: { close: true },
      props: {
        src: "https://www.google.com/recaptcha/api.js",
        async: true,
        defer: true,
      },
    });

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  if (!chat())
    useHead({
      tag: "script",
      id: "recaptcha",
      setting: { close: true },
      props: {
        src: "https://www.google.com/recaptcha/api.js",
        async: true,
        defer: true,
      },
    });

SolidJS•2y ago•

68 replies

exercise

How do i conditionally add something to <head> based on what createAsync returns?

I need to wait for a resource coming from

createAsync

createAsync

so then i can decide whether i should add google recaptcha to <head> using

useHead

useHead

from @solidjs/meta

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  if (!chat())
    useHead({
      tag: "script",
      id: "recaptcha",
      setting: { close: true },
      props: {
        src: "https://www.google.com/recaptcha/api.js",
        async: true,
        defer: true,
      },
    });

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  if (!chat())
    useHead({
      tag: "script",
      id: "recaptcha",
      setting: { close: true },
      props: {
        src: "https://www.google.com/recaptcha/api.js",
        async: true,
        defer: true,
      },
    });

How do i conditionally add something to <head> based on what createAsync returns?

Similar Threads

How do i conditionally add something to <head> based on what createAsync returns?

Similar Threads

Similar Threads

Similar Threads