Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Information

Description#

The ClickOutside is a component used to call and actions when the user clicks outside this component children.

Import#

it can be imported from the core.

Code Example

import { ClickOutside } from "@codecraftkit/core";

or alone.

Code Example

import ClickOutside from "@codecraftkit/clickoutside";

Usage#

Code Example

function MyApp() {
  const {isOpen, onOpen, onClose} = useDisclosure();
  return <>
   {
     isOpen ?
       <ClickOutside handleAction={onClose}>
         <Box rounded="md" bg="red.400" color="white" p={4}>
           Click outside this button to close it
         </Box>
       </ClickOutside> :
       <Button colorScheme="blue" onClick={onOpen}>Open Box</Button>
   }
 </>
}

Props#

name

type

required

default

description

children

Component

yes

The body of the ClickOutside

handleAction

Function

yes

The callback when the user click outside