import { Meta, Story, Canvas, Controls } from "@storybook/blocks";
import * as InputDeviceStories from "./use-input-device.stories";

<Meta of={InputDeviceStories} />

# useInputDevice

Use this hook whenever you need to know wether user is actively using touch or mouse to navigate. Useful when you need
to know if user can hover elements.

> Remember: Small viewport size doesn't mean user won't use mouse (some prefer to have small browser windows or open
> websites in a side panel) and large screen doesn't exclude touch (ie: laptops with touch screen).

## Arguments and return value

<Controls />

## Provider Component

This hook requires the page to be wrapped with the `InputDeviceProvider` component like so:

```jsx
import { InputDeviceProvider } from "@chromia/ui-kit";

const App = () => {
  return (
    <InputDeviceProvider>
      <CurrentComponent />
    </InputDeviceProvider>
  );
};
```

## Demo

When testing the demo with dev tools simulator remember that first click (simulated touch) just activates the viewport
so can't be registered as a touch.

<Canvas style={{ background: "#1F1A23" }}>
  <Story id="hooks-useinputdevice--default" />
</Canvas>