search

hassanzohdy / react-router

A Simple powerful react router system
5 stars 1 forks source link

[QUESTION] - Is it possible to change the layout of a page programmatically? #2

Closed sujit-baniya closed 1 year ago

sujit-baniya commented 1 year ago

I was wondering if it's possible to change layout of any page on click event or programatically? This feature can be real helpful when using multiple theme based app and users could switch their own theme as required.

hassanzohdy commented 1 year ago

You can do this by using one BaseLayout to all/certain routes.

Also, it can be done by wrapping the entire application in Root component, this would make a full re-render if you made any state update in the Root.

If you can give me more descriptive example or Code Sandbox example, it would be better to understand your idea.

sujit-baniya commented 1 year ago

Let's take a scenario,

There's a Campaign component and 3 Layouts: LeftSidebarLayout, RightSidebarLayout, MinimalLayout; with LeftSidebarLayout as default layout. On page load, Campaign component is loaded with LeftSidebarLayout. User has option to change the layout and he changes the layout to RightSidebarLayout by choosing from UI (similar to choosing theme in wordpress).

Let me know if above clarifies the scenario

hassanzohdy commented 1 year ago

I'm not really sure how this could be related to a router package.

But you can achieve this using BaseLayout components or inside the Root Component

See this example

https://codesandbox.io/s/react-typescript-forked-e7q6uz?file=/src/App.tsx

If you've an example with React Router Dom that i can look into it would be better

sujit-baniya commented 1 year ago

I'm not really sure how this could be related to a router package.

It's actually not related to router package but since this package also provides layout feature, I had this question :). Let me check in your suggested solution.

hassanzohdy commented 1 year ago

Ah OK.

If you've a theme manager its probably better to do it in the root component as this component is rendered only once unless you have a state inside it like in the example above.

If you want to have a more flexible state management, check Mongez Atoms, it can be used to make renders in specific components, or updating parent components from nested children components