[Help Wanted] Is that possible for App Component have access to ctx.state
Hello, everyone!
I am currently working on a project using Fresh (love it so for), and I am wondering "Is that possible for App Component has access to ctx.state"
export default function App({ Component }: AppProps) {
// somehow get data from ctx.state
const { user } = ctx.state
return (
<div class={tw`h-screen bg-white dark:bg-black`}>
<Head>
<title></title>
<style>
{// I want to set some custom css variables based on user}
{`:root { --color-who: '#fff'}`}
</style>
</Head>
<Component />
</div>
)
}
You need to define a handler that call ctx.render(the_data_you_want_to_pass_as_props) . see example of ctx.render at https://fresh.deno.dev/docs/getting-started/fetching-data
@sylc
for normal page component like index.tsx, I can add a handler like you showed, but for _app.tsx, I don't think it's a normal page component and can not add a handler
I want to remove _app.{j|t}s{x}? soon, replacing it with a more generic _layout system. I'll make sure to take into account middleware props in this system.
@lucacasonato
Cool!!! Looking forward to this. I have to create a folder called layouts to store my custom layout component and import it on every page component in my current project for now, made me a little envy about how easy layout system was in SvelteKit
I want to remove
_app.{j|t}s{x}?soon, replacing it with a more generic_layoutsystem. I'll make sure to take into account middleware props in this system.
What is the status of this work? Is there a version of Fresh that you are shooting for?
I would like to chip in and say I can help implement layouts if we already have a direction.
Any updates?
at least does anyone know how we could pass an object to the _app.tsx file ? because we could construct the object in index.tsx from ctx.state and just pass it on to _app.tsx but I couldn't managed to do that either.