How to use the docz.useDocs function in docz

export const MenuHeadings: SFC = ({ route, onClick }) => {
  const docs = useDocs()
  const { linkComponent: Link } = useConfig()
  const headings = docs && getHeadings(route, docs)

  return headings && headings.length > 0 ? (
    
      {({ location }) => (
        
          {headings.map((heading: any) => (

export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
  const docs = useDocs()
  const to = item.route
  const headings = docs && getHeadings(to, docs)
  const current = useCurrentDoc()
  const isCurrent = item.route === current.route
  const showHeadings = isCurrent && headings && headings.length > 0
  const currentHash = getCurrentHash()
  return (
    
      
      {showHeadings &&

export const Sidebar: SFC = ({
  menu: current,
  pathname,
  mobile,
}) => {
  const docs = useDocs()
  const { width } = useWindowSize()
  const { showing, setShowing } = useContext(mainContext)

  const menus = useMenus()
  const isDesktop = width > breakpoints.tablet

  const toggle = useCallback(() => {
    setShowing((s: any) => !s)
  }, [])

  const handleSidebarToggle = (ev: React.SyntheticEvent) => {
    if (isDesktop) return
    toggle && toggle()
  }

  useEffect(() => {

export default ({ prev, next }) => {
  const names = useDocs().reduce(
    (map, val) => ({ ...map, [val.route]: val.name }),
    {}
  )

  return (
    <>
      <hr>
      <div></div>

export const Link: SFC = ({ href, ...props }) => {
  const { separator, linkComponent: Link } = useConfig()
  const docs = useDocs()
  const toCheck = useMemo(() => getSeparator(separator, href), [
    separator,
    href,
  ])

  const matched = docs && docs.find(doc => doc.filepath === toCheck)
  const nHref = matched ? matched.route : href
  const isInternal = nHref && nHref.startsWith('/')

  return isInternal ? (
    
  ) : (
    
  )
}