< Back to Coding, React

Adding a blur function in React

An example is to hide a menu if you click off it.

const hideMenu = (e) => {
    if ( !e.currentTarget.contains( e.relatedTarget ) ) {
        toggleActive("inactive");
    }
}

This is an example function which changes the variable that affects the menu.

<div onBlur={hideMenu}>
        /* menu elements */
</div>

Then just add the function to the menu container.

Leave a Reply

Your email address will not be published. Required fields are marked *