Add provider component to context

Donald Biden · 2024-10-06T18:28:10.237Z

Hi, is this an anti-pattern in Fresh? ```tsx export default function App({ Component, SomeProvider }: PageProps) { return ( ); } ``` Basically `SomeProvider` is attached to the `ctx` via middleware. Use-case is if you want to add server props coming from `state`. So instead of doing something like: ```tsx import { SomeProvider } from 'your-library' export default function App({ Component, state }: PageProps) { return ( ); } ``` It improves DX since user-land wont have to do this anymore. Will it be unique to each request? And if yes, how would you update `PageProps` type?

Hi, is this an anti-pattern in Fresh?

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

Basically SomeProviderSomeProvider is attached to the ctxctx via middleware. Use-case is if you want to add server props coming from statestate. So instead of doing something like:

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

It improves DX since user-land wont have to do this anymore. Will it be unique to each request? And if yes, how would you update PagePropsPageProps type?

Deno•2y ago•

7 replies

Donald Biden

Add provider component to context

Hi, is this an anti-pattern in Fresh?

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

Basically SomeProviderSomeProvider is attached to the ctxctx via middleware. Use-case is if you want to add server props coming from statestate. So instead of doing something like:

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

It improves DX since user-land wont have to do this anymore. Will it be unique to each request? And if yes, how would you update PagePropsPageProps type?

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Deno

Chat about Deno, a modern runtime for JavaScript and TypeScript.

20,934 Members

Join

Add provider component to context

Add provider component to context

Continue the conversation

Deno

Continue the conversation

Deno

Similar Threads