Function useBreakpointName

Custom React hook that detects the current viewport breakpoint name.

This hook uses the vevet library to determine the current viewport size and assigns a corresponding breakpoint name ('desktop', 'tablet', or 'phone'). It updates the breakpoint name when the window is resized.

Example

const MyComponent = () => {
  const breakpoint = useBreakpointName();

  return (
    <div>
      Current Breakpoint: {breakpoint}
    </div>
  );
};