vmarchesin / react-konami-code

Trigger an easter egg by pressing a sequence of keys.
MIT License
62 stars 12 forks source link

Option to reset #5

Closed jLynx closed 5 years ago

jLynx commented 5 years ago

Hi

Can you add the option to reset and hide the element again?

I have an issue where I have a box that pops up. but when I close out of the box, I cant get it to reopen when the code is called as it already thinks its visible

vmarchesin commented 5 years ago

Sorry for the late reply. The timeout prop resets the component already. Are you suggesting a function callback to force reset the component?

vmarchesin commented 5 years ago

Closed due to inactivity. If you wish to request this again feel free to do so and I'll consider the development.

james-e-morris commented 3 years ago

@vmarchesin

The timeout prop resets the component already. Are you suggesting a function callback to force reset the component?

~Can you elaborate how the timeout prop reset works for this use case? I want the Konami code to trigger my action every time the code is entered, not just the first time. Right now, I see that the component state is set to done=true, and then all future code entries do nothing. Is there a way to set the state prop done back to false?~

Nevermind, I messed up while testing. For future reference, setting timeout={1} results in the konami code done state being set back to false after 1ms.

vmarchesin commented 3 years ago

I was going to suggest doing exactly that, setting the timeout to 1ms. I guess I could make some changes so the action is fired on every code input. I did it this way so something could be displayed but the action callback is not necessarily bound to the display so it could be fired multiple times if you wanted to. A PR for that would be a nice addition.

In any case if you don't care about the input reset delay (and you don't want to wrap any children) you can use the custom hook as it can be fired as many times as you want.

james-e-morris commented 3 years ago

Thanks, I think I still need the full component in order to capture it within my other component that I am rendering when the code is triggered. I get a hook error if I try to hook to within my component. I am new to react though, so maybe I'm not setting up the hook properly.

image

vmarchesin commented 3 years ago

You can't use hooks with class components. I can see your component is a class since it's calling super(props) in the constructor. In order to use the custom hook you must change your class component into a functional component. Unless there's a strong reason to use a class component you could try that, otherwise you can just use the 1ms trick and it should work as intended.

james-e-morris commented 3 years ago

Yeah, I need to keep it as a class to take advantage of some of the class features in a few places. Thanks for your help!