I want to be able to pass in a prop when initializing a component whose value will be used to dictate whether the hover effect is active or not. How would I go about doing this?
For example, if you don't want the hover effect to be active on an instance of a <Button /> component then you'd be able to do something like this <Button hover="someValue"/> and the hover effect would be disabled.
Usually you just use some boolean property for that, if you want it to be enabled by default, just set it to true:
export let hover = true; // Value used if not set on component
If someValue is supposed to be local state you would have to pass it like this:
<Button hover={someValue} />
You can of course also invert the logic and use a default of false.
The value would then be used in the component to add or not add a class, e.g.
<div class:hover >...</div>