I'm using react FullCalendar component and I need to change the background color of an event as it becomes the "CurrentEvent" (when the now indicator is over it).
I'm able to do that when I load the screen, but I also need to do it when the screen is open and the "current event" changes as the time passes.
The way I was thinking about doing that is by using any callback indicating this situation and then changing the style, but I'm not finding any callback that points out this situation.
Any ideas? Thank you.
Related
I am trying to use a parent component to control animations in a child Canvas element. Specifically I want an animation to happen when a user inputs a correct answer.
It works until the user changes the state in the parent component, and then it no longer works.
I've made a stripped-back, minimal version of my code here to show my issue: https://codesandbox.io/s/epic-leaf-08jqvy?file=/src/App.js
My desired behaviour is that the red box bounces when a user clicks submit. That happens if they don't type anything in the input box, but as soon as you enter anything into there - changing state and re-rendering the component - the button no longer triggers the animation in the Canvas child component.
As far as I can tell, the issue is to do with changing the state when inputing text. If I make a version where the input is just assigned to a variable, it works fine, but I need to be able to use state and re-render other parts of it.
I have put a console.log in the jump() function, so I can see that it is being called, but no animation is taking place in the canvas.
I assume that what's happening is that everything is being re-rendered when the state changes, and so the useRef is no longer tracking to the right thing.
Things I've tried:
putting the canvas in a memoized component to prevent it from re-rendering
using eventlisteners to see if I can trigger the animations in other ways - keydown ones work, but I need the user to be able to type, so I tried other ones (like hashchange or audio.play) but neither of those worked.
You can see the thing I'm actually trying to build here: https://papaya-platypus-86565f.netlify.app/play Basically users answer questions and an animation plays depending on whether they're right or wrong, to give it a game-y feel.
Thanks!
I like your red box as well as your reasoning. Yes, the input state changing on keystroke is causing the entire App component to re-render. Note that your App.js component has a lot going on (all good stuff), such as your Box class instantiation, your canvas instantiation, etc.
The key is to break your components into smaller parts, particularly separating stateful components from non-stateful components. We don't want your canvas re-mounting on every input change, so we make them sibling components!
Here's a working example of your code, just in smaller components:
https://codesandbox.io/s/strange-julien-d3n4zm
I hope this helps.
I am using <Dialog></Dialog> Material UI to render the React Hook Form (form Popup).
When the data is small. It is working well. But when my form is bigger, I was starting to receive the warning [Violation] 'click' handler took 239ms
The second things is, inside the form, I have 2 Rich text editor. Then the new warning [Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL> is raised from 2 Rich text editor component.
I would like to ask is there any way to avoid the warning, or the other way to show the popup form. Can I use intersection observer to limit the data rendered?
Any advices are welcomed.
Is there a native MUI event for when the pre-selection value changes in a MUI:Select component?
For example, here is my MUI:Select component with 3 options:
I would like an event for when 'Public', 'Restricted' or 'Private' is pre-selected (but not actually selected; i.e. before the onChange() event), either with a mouse-over event or a keyboard up/down event. This is because I have a tooltip card that needs to change dynamically for the user as they interact with the options.
Using this example https://codesandbox.io/s/3iv96 as a guide, I implemented a bespoke solution by capturing the mouse-over event and extracting the text value. I just realized I have forgotten to handle key up/down.
So the question becomes whether I have just missed the obvious, or do I need to roll my own component by wrapping MUI:Select and publishing the events I need.
Looks like out of the box this isn't supported.
Looking at this thread https://github.com/JedWatson/react-select/issues/745 it has to be done manually.
This may be incredibly simple but for the life of me I can't figure out how to achieve it.
I have a notification system working through websockets and every time a new notification gets sent, I add it to an array in state and re map to include the notification. each notification has its own timeout so I'm able to remove them programatically... but.... each notification also has an animated logo which basically resets every time a new notification appears. This happens due to the array being mapped each time and therefore the animation begins again as it's essentially a new notification... so I end up with several notifications all having their animation in sync.
Ultimately i'd like to be able to receive a new notification, render it and not touch set state... is this possible?
I'd say it depends on how exactly you are doing animations. Is it purely CSS animation or JS-driven one? Usually such behavior would mean that components are being remounted on every update. This can be changed by providing consistent key attribute, such as a unique id that identifies a notification.
If you make sure your existing notifications have the same keys as before, they shouldn't rerender when you add a new notification to your array in state.
Here's a codesandbox in which you can generate new notifications without triggering re render for existing notifications.
I have a Tooltip component that when hovered displays a simple tooltip.
When you mouseLeave the component, a setTimeout fires, and when it ends, the tooltip is closed (setState({ open: false })).
Now I'd like to add a behavior to reflect the one of the native OS tooltips:
When you mouseLeave a tooltip, but instantly mouseEnter a different tooltip, the previous tooltip is instantly closed, and the new one gets opened.
To do so, I need to have a shared state between all the instances of Tooltip component. I could use Redux but it seems a bit overkill for a so simple task (I'd need a container that interacts with the store and makes an action and a property available).
Are there simpler solutions?
The best way to share information between ReactComponent is the Flux architecture. Redux is one of them.
A more simple option is to use the browser native storage used to store temporary information : it is similar to global variable but with particular scope and duration definitions.
Move the shared state into the state of the parent component of all Tooltips, have this parent define a method setWhatever to set the value, and pass this method to Tooltip components via a property. This way, children can call their setWhatever property, which is really the one of their parent, when they need to change the state.