HTMLPLUS

Click Outside

The component calls a function when something outside of the target element is clicked on.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusClickOutside

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
disabled
Type
booleanboolean
Disable the component.
Name
once
Type
booleanboolean
The callback occurs only once.
Name
default
The default slot.
Name
onClickOutside
Emitted when outside of the component is clicked.
Value
void

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React, { useState } from "react";
import { ClickOutside, Card } from "@htmlplus/react";

const App = () => {
  const [inside, setInside] = useState(0);
  const [outside, setOutside] = useState(0);

  const onClick = () => {
    setInside(inside + 1);
  };

  const onClickOutside = () => {
    setOutside(outside + 1);
  };

  return <>    
    <ClickOutside onClick={() => onClick()} onClickOutside={() => onClickOutside()}>      
      <Card elevation="10">        
        <div className="container">          
          <b>{inside}</b>          time(s) inside clicked
          <br />          
          <b>{outside}</b>          time(s) outside clicked
        </div>        
      </Card>      
    </ClickOutside>    
  </>;
};

export default App;
.container {
  padding: 1rem;
}
plus-click-outside {
  margin: auto;
  display: block;
  max-width: 20rem;
}
Contributors
Prev
Card
Next
Cropper
SELECT YOUR FRAMEWORK
React logo
React