0

I'm developing a React App using different components to layout the page. While i Work with these components I usually go back and forth changing some of their props in the code.

What I would like is that when I save the file React sees that I changed some props and rerender the component with new props. Right now I have to update the page every time and it's really annoying.

EXAMPLE I have this transform component

function Transform({size, children}) {
          return <div style={`transform: scale(${size});`}>{children}</div>
     }

And I use it in the app like this

<Interface>
    <Transform size={0.25}><Grid layout={'3x4'} /></Transform>
 </Interface>

When I change the size prop on the Transform component (just to test if I want the grid bigger) and save the file, React should reRender the component since one prop has changed and so it will appear differently. How can I set my workspace like this? Any help is really appreciated thanks! (even automatically updating the whole page would be great!)

math
  • 167
  • 2
  • 13

2 Answers2

0

I would just check the size in browser dev tools and change them there then once you are happy apply those to your code IN the bottom left of the picture you see styles and then you can just type what you want. enter image description here

Edit: As OP mentioned in the comment it will only be usable if you want to change some css properties.

miyav miyav
  • 338
  • 1
  • 5
  • 18
  • It's ok for this really simple example, but i have components where changing some props can result in huge css and html differences which I can't do manually on the browser – math Apr 11 '22 at 17:06
  • @AndreaScanu what do you mean by " I have to update the page every time "? – miyav miyav Apr 11 '22 at 17:09
  • Refresh the page with the button or F5 – math Apr 11 '22 at 17:12
  • 1
    Doesn't it get auto refreshed on any file change by whatever server you are running like webpack-dev-server react app is using by default if you created it with create-react-app? – miyav miyav Apr 11 '22 at 17:14
  • Yes actually you're right, it's just not working really well for some reasons (maybe my components are too compicated or maybe it's because I use HOC. I don't know why but it's really buggy. Anyway I just saw this on google: https://dev.to/fwouts/react-preview-instant-live-preview-of-components-in-vs-code-of, I think I will reply to myself whi this tool cause react live update is not working properly and is not as powerful as this extension is :0 – math Apr 11 '22 at 17:28
-1

This not exactly what I was looking for but I think it's even better! https://previewjs.com/

Edit: I also found that this was the solution to my original problem: Hot Reload is not working in my React App

math
  • 167
  • 2
  • 13