@codecraftkit/clickoutside

Made with create-react-library

Usage no npm install needed!

<script type="module">
  import codecraftkitClickoutside from 'https://cdn.skypack.dev/@codecraftkit/clickoutside';
</script>

README

clickoutside

Made with create-react-library

NPM JavaScript Style Guide

Install

npm install --save @codecraftkit/clickoutside

Usage

import React, { Component } from 'react'
import {Box, Button, Code, Grid, Text, useDisclosure} from "@chakra-ui/core";
import ClickOutside from "@codecraftkit/clickoutside";

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

License

MIT © CodeCraft