Setting Full width Prop to true is make the speedometer component to render partially and then re render on state change

[AakashRaj20]

I have made speedometer component whose value changes upon button button clicks but when the page is rendered for the first time the speedometer component only renders partially but upon clikcing the button which causes a re render beacuse forcerender prop is set to true it strats rendering more parts of the components namly the height of the component increses by 7 px on each button click but this only happens when i set the fullwidth prop to true and it renders fine when full width prop is set to false and has fix width and height but the responsivness of the component is lost.

Browse: ubuntu package: npm library: react

[palerdot]

but the responsivness of the component is lost.

This component is not responsive out of the box.

You have to manually watch for parent layout changes and recompute width, height along with force render (which is outside the scope of the library and this discussion).

Please share a reproducible codesandbox or repo in future for reference.

[AakashRaj20]

but the responsivness of the component is lost. This component is not responsive out of the box.

You have to manually watch for parent layout changes and recompute width, height along with force render (which is outside the scope of the library and this discussion).

Please share a reproducible codesandbox or repo in future for reference.

Hi I apologize for not sharing the code earlier here is the code sandbox link this is the same as what I am trying to do in my application https://codesandbox.io/s/busy-tristan-8tnkfj?file=/src/App.js when the fluidwidth is set to true the whole component do not render but when it is set to false it does and also I have given force render true and if I set fluidwidth to false it losses it resposnivity and flows out of the parent div

[palerdot]

I still don't understand the problem, but I would like to point out again that this component is not responsive out of the box.

You have to implement your own solution for responsiveness, like watching for resize event (https://www.w3schools.com/jsref/event_onresize.asp), and use a combination of fluidWidth, forceRender to implement your own responsive rendering logic.

If you are looking for the component to automatically rerender responsively, it will not happen.