import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, Text, Link, useBodyScroll } from 'components'

export const meta = {
  title: 'use-body-scroll',
  group: 'Utils',
}

## Use body scroll

Disable scrolling behavior for body or any element, it is useful for displaying popup element or menus.

This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.

<Playground
  desc="Click button to disable scrolling."
  scope={{ Button, Spacer, Text, useBodyScroll }}
  code={`
() => {
  const [hidden, setHidden] = useBodyScroll()
  return (
    <>
      <Text small b type={hidden ? 'error' : 'default'}>{hidden ? 'Body disabled.' : 'Body can be scrolled.'}</Text>
      <Spacer y={.75} />
      <Button size="small" type="success-light" auto onClick={() => setHidden(true)}>disable scroll</Button>
      <Spacer y={.5} />
      <Button size="small" type="secondary-light" auto onClick={() => setHidden(false)}>reset</Button>
    </>
  )
}
`}
/>

<Attributes edit="/pages/en-us/components/use-body-scroll.mdx">
<Attributes.Title>useBodyScroll</Attributes.Title>

```ts
type BodyScrollOptions = {
  scrollLayer: boolean  // whether Ref needs to scroll
}

const useBodyScroll = (
  elementRef?: RefObject<HTMLElement> | null,
  options?: BodyScrollOptions,
) => [boolean, Dispatch<SetStateAction<boolean>>]

```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
