useDisclosure

Manage boolean open/close state with open, close, and toggle handlers plus callbacks that fire only on real transitions.

Toggle a dialog

Boolean state with open / close / toggle handlers. Optional onOpen / onClose callbacks fire only on real transitions, never on no-op calls.

Loading demo…

import
 
{
 
Badge
,
 
Block
,
 
Button
,
 
Dialog
,
 
Row
,
 
Text
,
 useDisclosure 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
opened
,
 
{
 open
,
 close
,
 toggle 
}
]
 
=
 
useDisclosure
(
false
,
 
{
    onOpen
:
 
(
)
 
=>
 console
.
log
(
'opened'
)
,
    onClose
:
 
(
)
 
=>
 console
.
log
(
'closed'
)
,
  
}
)
;
 
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<Badge
 
color
=
{
opened 
?
 
'success'
 
:
 
'gray'
}
>
{
opened 
?
 
'Open'
 
:
 
'Closed'
}
</Badge
>
 
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
<Button
 
onPress
=
{
open
}
>
open
</Button
>
        
<Button
 
variant
=
"outline"
 
onPress
=
{
close
}
>
close
</Button
>
        
<Button
 
variant
=
"ghost"
 
onPress
=
{
toggle
}
>
toggle
</Button
>
      
</Row
>
 
      
<Dialog
 
visible
=
{
opened
}
 
title
=
"Dialog title"
 
onClose
=
{
close
}
>
        
<Block
 
p
=
"md"
>
          
<Text
>
This
 dialog's open state is managed by useDisclosure
.
</Text
>
          
<Button
 
onPress
=
{
close
}
>
Close
</Button
>
        
</Block
>
      
</Dialog
>
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap