Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-outclick
Advanced tools
A React component for handling clicks outside of a component
npm install --save react-outclick
or
yarn add react-outclick
import OnOutsiceClick from 'react-outclick';
function App() {
return (
<OnOutsiceClick
onOutsideClick={(ev: Event) => {
alert('You clicked outside of this component!!!');
}}>
Hello World
</OnOutsiceClick>
);
}
import React from 'react';
import OnOutsiceClick from 'react-outclick';
export default function App() {
const click = () => {
console.log('click');
};
const ref = React.useRef();
return (
<div>
<nav>
<span>Clicks will not be handled here as it is outside the container</span>
</nav>
<main>
<div ref={ref} className='App'>
<h1>Clicks will be handled here</h1>
<OnOutsiceClick container={ref} onOutsideClick={click}>
<h2>Start editing to see some magic happen!</h2>
</OnOutsiceClick>
</div>
</main>
</div>
);
}
PropTypes.node.isRequired
Since the OnOutsiceClick
specifically handles clicks outside a specific subtree, children
is expected to be defined. A consumer should also not render the OnOutsiceClick
in the case that children
are not defined.
Note that if you use a Portal
(native or react-portal
) of any sort in the children
, the OnOutsiceClick
will not behave as expected.
PropTypes.func.isRequired
The onOutsideClick
prop is also required as without it, the OnOutsiceClick
is basically a heavy-weight <div />
. It takes the relevant clickevent as an arg and gets triggered when the user clicks anywhere outside of the subtree generated by the DOM node.
PropTypes.func.isRequired
By default, this library will detect any click
event that happens outside of your react component. But sometimes, you want to
detect event inside a container and outside one of its child. For that you can pass in a container (parent) element react ref as a prop.
By default, clicks are detected everywhere outside your component.
If a container
is specified then only those clicks are handles which happens outside of your component and inside the container.
PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])
By default, the OnOutsiceClick
renders a display: block
<div />
to wrap the subtree defined by children
. If desired, the display
can be set to inline-block
, inline
, flex
, or contents
instead. There is no way not to render a wrapping <div />
.
PropTypes.oneOf(['touchstart' , 'touchend'])
The type of touch event to detect. By default, it is touchend
.
PropTypes.oneOf(['click' , 'mousedown' , 'mouseup'])
The type of mouse event to detect. By default, it is click
.
MIT © tusharf5
FAQs
A React component for handling clicks outside of a component
The npm package react-outclick receives a total of 251 weekly downloads. As such, react-outclick popularity was classified as not popular.
We found that react-outclick demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.