import { Meta, Props } from '@storybook/addon-docs/blocks'; import { ClickOutsideWrapper } from './ClickOutsideWrapper'; <Meta title="MDX|ClickOutsideWrapper" component={ClickOutsideWrapper} /> # ClickOutsideWrapper A wrapper component that detects clicks outside of the elements by attaching event listener to `window` or `document` objects. Useful for components that require an action being triggered when a click outside has occurred, for example closing an overlay or popup. # Usage ```jsx <ClickOutsideWrapper onClick={() => console.log('Clicked outside')}> <div style={{width: '300px'}}>Container</div> </ClickOutsideWrapper> ```` <Props of={ClickOutsideWrapper}/>