useScrollLock

Whether the user processing page can scroll

Import: import { useScrollLock } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

Usage

useScrollLock Please click the button to see the effect

import React from 'react';
import { useScrollLock } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
   const [scrollLocked, setScrollLocked] = useScrollLock(false);

     return (
       <div>
         <p>{ 'scrollLocked: '+scrollLocked }</p>
         <Group spacing="xl">
           <Button onClick={() => setScrollLocked(true)}>Lock</Button>
           <Button onClick={() => setScrollLocked(false)}>unLock</Button>
        </Group>
       </div>
     );
}

1
import React from 'react';
2
import { useScrollLock } from '@kubed/hooks';
3
import { Button, Group } from '@kubed/components'
4

5
export default function App() {
6
   const [scrollLocked, setScrollLocked] = useScrollLock(false);
7

8
     return (
9
       <div>
10
         <p>{ 'scrollLocked: '+scrollLocked }</p>
11
         <Group spacing="xl">
12
           <Button onClick={() => setScrollLocked(true)}>Lock</Button>
13
           <Button onClick={() => setScrollLocked(false)}>unLock</Button>
14
        </Group>
15
       </div>
16
     );
17
}
18

19

API

The useScrollLock hook accepts one parameter:

lock – whether to lock or not

1
function useScrollLock(
2
   lock?: boolean
3
  ): readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>]

Params

Parameters	Default Value	Type	Description
lock	`false`	`boolean`	Whether the page locks scrolling

Result

Parameters	Default Value	Type	Description
scrollLocked	-	`boolean`	Whether it is locked
setScrollLocked	-	`React.Dispatch<React.SetStateAction<boolean>>`	Set the current state