Used React Masonry Plugin for my alignment of cards https://github.com/eiriklv/react-masonry-component
Problem is I have expandable component in cards which increases the height of the card and masonry layout gets distorted. Plugin realigns if state of the data is update or it works on scroll. Any idea how to reload the layout manually on expandable content. Checked out issues on plugins also but didn't find an appropriate solution. Any other react wrapper pf masonry or plugin recommendations for this scenario? Thanks for help in advance
I know that using jQuery I can use reloadItems and layout methods but I am trying to avoid jquery
I was facing a similar issue in which I wanted to remasonrize (if you will) after each toggle show/hide of a div.
In my case I had component A as the parent (with the <Masonry> component)
and components B1,B2...Bn inside it.
Every time I toggle (in your case resize) either of B1,B2...Bn it would update the state of A thus causing the Masonry component to render again.
If you post your code sample then I could help you out with the exact code.
You can access the masonry component based, as explained in the documentation:
https://github.com/eiriklv/react-masonry-component#accessing-masonry-instance
and perform manual layout on the instance directly.
However it seems that the update should have happen automatically in react as you probably changing the state of the component to render it in the expanded mode.
So you might want to explore why the update is not happening for your case.
Related
Recently, I am working to build a drag and drop UI builder for react based app frameworks. Before implementing drag and drop functionality, I am trying to render a page layout according to structured array stored in my state.
My question is, How can I render actual components with events such as OnClick, OnChange. Since I'm using "ReactDOMServer.renderToStaticMarkup" to convert the component to html/css, events are not triggering. Can someone provide me a way forward from here. I have added a sample code here. My plan is to use next js and SSR to render the page. Since converting the component to html/css, my event triggers are not triggering, I'm stuck here. I would love to see an example if someone can provide.
Sample - https://codesandbox.io/s/zeus-research-b61lwo?file=/src/Component.js:356-391
I'm answering my own question if someone thinking of following the same way of mine. I made a mistake by converting the react component to html/css and use dangerouslySetInnerHTML to render it. Instead of that, I'm going to render react component it self. So far, It is working. Ill update the answer if I get any issues.
I've got a complex component which does all its rendering in a render function. There are multiple parts to this, and different bits of the view get rendered - one of these things is a filter bar, showing the filters that have been applied.
What I'm noticing happening, is if I apply a filter which in turn presents this bar, it causes everything else to be fully re-rendered. This is causing a number of other issues and I need to try and stop it from happening.
I've never come across this issue when using normal templates as Vue seems to handle these very intelligently, but I have no idea how to tackle this. The only thing I can think of is setting a key on each thing I don't want re-rendered but not sure if this will a) solve the problem, and b) be possible for the content that is passed in through a slot
Has anyone else faced this issue, and if so how can it be solved?
I had a similar issue when using vuetify text inputs in a complex component which was causing the app to slow down drastically.
In my search I found this link which was specific to vuetify:
high performance impact when using a lot of v-text-field
then found out that this is actually a vue thing from this GitHub issue:
Component with slot re-renders even if the slot or component data has not changed
and there is plan to improve this in it is tracked here (vue 3 should resolve this issue):
Update slot content without re-rendering rest of component
so after reading through all these I found some workarounds that helped me a lot to boost the performance of my app, I hope these will help you as well:
divide that complex component into smaller ones specially when there is some bit of code that changes data that bounds to template causing re-rendering (put them in their own component)
I moved all data layer control to the vuex store, instead of using v-model every where and passing data as events and props, all the data is updating in the store through an action and read from the store through a getter. (from data I mean somethings that is being looped in the template in a v-for, API results, and so on... all of them is being set, updated and read through the store. my components still have the data object but only for the things related to the style and template control like a boolean to control a modal or an imported icon which is used in the template and alikes)
lastly I wrote a function called lazyCaller which its job is to update the values in the store with a delay (when immediate data update isn't necessary) to avoid rapid updates comping from something like a text input (with out this every key stroke trigger the value update action)
I am using the React library, I want to add the ability to change the theme, it will look quite simple there are three buttons (or radio buttons) and when you click on one of these buttons the picture will change, the problem is the implementation and updating the page (so that the image does not disappear) I want to ask about implementation, how can I implement it? create a state and inside a state create imported names that each of them stores the picture itself? or it's a bad idea, and at the end I wanted to know how to do it so that when the page is refreshed, the picture does not disappear after changing the theme
I suggest using React Context, you would wrap your whole app in a ThemeProvider, then any component that needs to react to changes in the theme can access the current themeName value via the useContext hook. Here is a freecode blog on how to achieve what your after, using Context and CSS modules.
Just to note, this solution will not persist page refreshing, but the 2 solutions could be combined, if that is necessary. So when you change the theme, localstorage is also updated with the current theme name. On page load, you could read the theme name to configure the Context.
I want to create a generic component that should detect required component View outside click (hide the View/dropdown, etc. when pressed outside). Basically it's for the Autocomplete Search Dropdown but I guess such functionality could be used in the future for other things.
The content should be dynamic and could be passed from any level of the app because such functionality is a common UX thing.
It shouldn't be modal that always render content at the screen center because a dropdown should be opened below its trigger, etc. So it should respect the initial component position. (In think to use onLayout/measure API of the initial position when passing the content into the Backdrop)
I researched a lot of resources and found that the one possible way is:
Create a TouchableWithoutFeedback layer (Backdrop) at the top level of the app.
make it fullscreen with/height
When dropdown is shown: render the Backdrop and onPress on it - close the dropdown & backdrop.
The main question is: How to pass a generic content into this Layer and save its relationship with the parent/props, re-render when needed, etc.?
Please, keep in mind, that the component which should pass content for this layer could be deep inside the app.
I guess it could be done via Context API, etc. but I'm not sure if it's the best possible way.
P.S. in the case of web it's a trivial task: create a fullscreen layer -> use a portal -> move content at the top level of the app -> render it at the required X\Y position and listen for the outside press.
I didn't expect that such functionality will be a problem in the case of RN.
Thanks for any help.
I'm using CanJS (with StealJS) to build a quizz app, and I have quizz-question component that is rendered for each question!
I wonder how to make a transition with velocityjs each time quizz-question component is removed for answerd question and inserted for the new question?
Any help is appreciated!
A key element with using transitions on changing data is that the transition has to complete before removing the element from the DOM (which would remove the element from display immediately).
As far as I know, CanJS doesn't have a mechanism to wait for a process before removal of nodes, so the appropriate workaround is to have a node that isn't removed when content changes. You can structure your markup inside of that node, but the Velocity transition has to happen on the permanent node to make the transition successful.
For the example of fading in and fading out, setting the content to put inside the transition container should use an async setter (with val and resolve arguments) to make the transition work correctly. First fade out (and use the returned promise to wait), then update the markup with the new content (using resolve()), then fade in. I made a JSBin that demonstrates this concept, though the content inside the transition is very simple in the demo.
https://jsbin.com/lesagebomu/edit?html,js,output
In the case of a quizz-question component, you'd want to render the whole component inside of the div in fade-in. There's probably also a way to generalize this into a higher-order component using e.g. <div class="fade-in"><content /></div> and some data manipulation.
Another way to do this would be to dispatch events on the elements being added and removed and then listening to these events in the view:
<li on:click="../removeQuestion(question)"
on:removing:by:question="fadeOut()"
on:inserting:by:question="fadeIn()">{{question.name}}</li>
You can see this here: https://jsbin.com/lepuxaq/edit?html,js,output