Skip to main content

Interactions

Handle click, double-click, hover, and keyboard events.

Click Events​

Live Editor
function ClickExample() {
  const [clicks, setClicks] = React.useState(0);

  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'Click Me', author: `Clicks: ${clicks}` }}
      onClick={() => setClicks(clicks + 1)}
    />
  );
}
Result
Loading...

Double Click Events​

Live Editor
function DoubleClickExample() {
  const [doubleClicks, setDoubleClicks] = React.useState(0);

  return (
    <FloppyDisk
      size="medium"
      label={{ name: 'Double Click', author: `Count: ${doubleClicks}` }}
      onDoubleClick={() => setDoubleClicks(doubleClicks + 1)}
    />
  );
}
Result
Loading...

Hover Events​

Live Editor
function HoverExample() {
  const [isHovered, setIsHovered] = React.useState(false);

  return (
    <FloppyDisk
      size="medium"
      label={{
        name: isHovered ? 'Hovering!' : 'Hover Me',
        author: 'Interactive',
      }}
      onHover={(hovering) => setIsHovered(hovering)}
    />
  );
}
Result
Loading...

Focus Events​

Live Editor
function FocusExample() {
  const [isFocused, setIsFocused] = React.useState(false);

  return (
    <FloppyDisk
      size="medium"
      label={{
        name: isFocused ? 'Focused' : 'Click or Tab',
        author: 'Keyboard Nav',
      }}
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
    />
  );
}
Result
Loading...