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

SomeProvider

SomeProvider

is attached to the

ctx

ctx

via middleware. Use-case is if you want to add server props coming from

state

state

. 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

PageProps

PageProps

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

SomeProvider

SomeProvider

is attached to the

ctx

ctx

via middleware. Use-case is if you want to add server props coming from

state

state

. 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

PageProps

PageProps

type?

Add provider component to context

Similar Threads

Add provider component to context

Similar Threads

Similar Threads

Similar Threads