usePopup

The usePopup hook is used inside the Popup component. This hook handles the popup logic, inside the Popup component.

This hook is an internal hook and is not available for the users since it's not exposed as a part of this library.

Code

import { useRef, useState } from "react"

export default function usePopup(initialState){
    const [showPopup, setShowPopup] = useState(initialState);

    const popupRef = useRef(null);

    const popupState = (value) => {
        value === true ? setShowPopup(true) : setShowPopup(false);
    }

    function closePopup(e) {
        if (popupRef.current === e.target) {
            setShowPopup(false);
        }
    }

    return [showPopup, popupRef, popupState, closePopup];
}

Explanation

• As you can see above it uses the useState and useRef hook of the React internally for managing the state of slider on arrow click.

• It accepts a single parameter, intialValue, a boolean value (default false) - for intializing the state of popup.

• It returns the following:

  • showPopup - current state of popup.

  • popupRef - to get the reference to the container containing the popup box,

  • popupState - a function to close popup when clicked on close button.

  • closePopup - a function to close popup when clicked outside.