I would like to achieve a behavior such as this:
https://developer.android.com/training/animation/videos/layout-transition.gif
I want to have an image in one component (e.g. product card), and when i'm clicking on that component, it will switch route (e.g. product page) but will keep the same component just resize it to be bigger.
Is it possible using React DOM?
Thanks!
Related
Objective
My goal is to have an AppBar at the top of the page that has a title in it. Then in the "Main" area of my screen I will have a route that renders a different component depending on the url. These are the components that need to update the page title that is being rendered in the AppBar. I only want the AppBar to re-render and nothing else, because it's the only thing that will have actual data change in.
Originally I was using useState() and just prop drilling the [pageTitle, setPageTitle] down to the components. From what I've read, you should avoid prop drilling if possible.
So I've tried leveraging useContext() but everything in the tree still re-renders.
Caveats
I would like to keep the layout of the HTML like I currently have it if possible. I'm not sure if that affects anything.
How I Tested For Re-rendering
I have console.log() statements per component. I got rid of strict mode in order to make sure the components are rendering only once. I tested this prior to leveraging useContext and the statements only print out once.
Now when I click on a navigation link you will notice it prints out a console.log() for all of the components that <PageTitleContext.Provider> is wrapping.
I only want the <AppBar> to re-render and nothing else, because this is the only component that is displaying the pageTitle.
Sandbox Code
https://codesandbox.io/s/appbar-page-title-update-m5y9el?file=/src/pages/Dashboard.jsx
My issue stems from wishing to have a mobile phone rendered in the page, which mimics that of an actual phone. I would like to use components from Material UI such as AppBar and Dialog, however they do not stay confined to the container of the phone, and instead still show in the entire browser window.
When I use a Dialog Component however, it's still relative to the actual browser viewport, and not that of the "phone", such as the following:
I would like it to do what is seen in the picture below, without using an IFrame.
Is there a way I can set an anchor for the components - or at least force them to treat a specific element as their boundary? Thanks.
For those wondering if this is resolved, the solution was to roll my own Dialog and Backdrop Components with Paper, and Box components.
A ref was passed into a Box component which surrounds the entire "Phone App", and it's current Element is passed into a Mui Portal's container property.
This allows for the container of the Custom "Dialog" to be the container I wished to have things bounded by.
I have started playing a bit with Shopify Polaris, in particular, the Frame layout:
https://polaris.shopify.com/components/structure/frame
What is not clear to me is that in the example provided by Shopify the sidebar, when an item is clicked, always toggles the toggleIsLoading method, and then it eventually always renders the actualPageMarkup component.
However, I would like to have a sidebar menu containing n different items. For each of them, I would like to render a particular component associated with the selection. How can I achieve this?
Ideally, I would like to always display the sidebar and the header, no matter what the component is.
I understand this question is not strictly related to Shopify Polaris or Next.js, however, I consider myself a newbie in both React and Next.js.
I would like to create React app where you import, move and resize images on the screen and then export their positions. My idea was that I would have image as a component that would have its own attributes like positions, width, height and source. The problem is that I don't want to render new image element every time the component change its state (position, size, etc.) since it can be slow to load the image. I just want to change its style. Is there some React fashion approach how to do it? Thank you!
Maybe for your problem might be usefull to look life cycle update component...because it gives you some certain pattern to re-render a component in your own way..try to read something on "componentShouldUpdate()" this method give you a way to re-render the component only certain condition.
maybe here might be right for you: https://www.toptal.com/react/optimizing-react-performance
My best
Let's say I have a React app (with React Router 4) with the following components and routes:
App (/)
Toolbar - A fixed toolbar
NavButton - A button whose appearance and behavior depends on the current route (see below)
MainMenu - A temporary drawer that pops out from the side to navigate between top-level routes
Admin (/admin)
Sidenav - A navigation drawer that is open all of the time on large screens and can be toggled on small screens. Clicking on items in the Sidenav navigates to different sub-routes under /admin
Content (/admin/<xyz>)
Public (/public)
Content
The behavior of the NavButton should be the following:
On a large screen:
it should always be a hamburger icon that opens the MainMenu.
On a small screen: (except for the first condition, this is similar to the experience on the Gmail mobile app)
if there is no Sidenav, it should display a hamburger icon that opens the MainMenu.
if the Sidenav is closed, it should display a back icon that opens the Sidenav.
if the Sidenav is open, it should display a hamburger icon that opens the MainMenu.
The /admin and /public routes are just examples. There are many more, some of which have Sidenavs and some of which don't.
My question is this: what is the React way to manage the UI state here and wire all of the components and routes together? It feels like App should be responsible for keeping track of whether the sidenav is open, so it can pass that information to Toolbar and others, but it also seems like App shouldn't be in charge of managing which of its potential children have or don't have Sidenavs. Also, how can props get passed down from App to some child when there's a Route in between?
Note: I'm fairly new to React and certainly not married to the component structure above; it's just for illustration.
It feels like App should be responsible for keeping track of whether the sidenav is open
True. The child components should always be presentational (pure/dumb) components.
App shouldn't be in charge of managing which of its potential children have or don't have Sidenav
I wouldn't call it "in charge". It is simply keeping the state of the application. The user is in charge, by clicking the hamburger button.
how can props get passed down from App to some child when there's a Route in between?
Why not? You can use render instead of component. For example:
let Parent = (props)=> {
<Route
path="/pizza"
render={()=> <Pizza topping={props.topping} />} />
}