[bug]: Can't find use-mobile hook in shadcn doc

[ardevik]

Describe the bug

Because restricted firewall in my company, I can't use the cli for adding components because it point to external registry, so I'm using manual installation for sidebar component and adding requirement one by one. Until I want add the @/components/hooks/use-mobile but can't find the example

Affected component/components

Sidebar

How to reproduce

1. Go to shadcn website
2. Add Sidebar with Manual Installation

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[akshay-nm]

the import generated in the sidebar.tsx (/components/sidebar.tsx) is

import { useIsMobile } from "@/components/hooks/use-mobile"

this hook is not installed via installation command. Any ideas where I get this?

[i-am-henri]

@akshay-nm You can get this hook via the repo:

This is the hook:

import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}

[akshay-nm]

i triednpx shadcn@latest add sidebar-01 as suggested here: https://ui.shadcn.com/blocks/sidebar

It worked, but one issue is, the shadcn add command overwrites the lib/utils.tsx (not related to this issue).
I had a bunch of functions in that file, and thanks to git i was able to revert changes in that file.

[DemaPy]

PR created to close issue.

[DemaPy]

@ardevik pls close issue once PR will be accepted.

@akshay-nm consider to create new issue for such task. It will be CLI development.

[DemaPy]

@akshay-nm Also it looks strange that utils.tsx file has been overwritten. Because default behavior for add command is: overwrite: false

And there is also check in file update-files.ts

So, please make sure to test it again and if it happend create new issue.