Numbers Prefer Multiplication

    useonclickadvanced

    1.0.3 • Public • Published

    This is an image Hook for React, helps you keep track of clicks on the INSIDE and OUTSIDE areas. This is an advanced version - it allows you to pass an array of refs that can be interacted with.

    Announce

    The next update will be:

    • [] switching to TS
    • [] the function name will be changed to useOnClickAdvanced
    • [] the example will be changed to a more understandable one

    Install

    npm install useonclickadvanced
    

    Usage

    import useOnClickAdvanced from "useonclickadvanced";
    
    const Header = ({ toggleMenu }) => {
      const nodeDiv = useRef(null);
      const nodeButt = useRef(null);
    
      // just pass refs array, these elements will be "frozen" and will not be clicked
      // anything outside will be clicked
      useOnClickAdvanced([nodeDiv, nodeButt], () => console.log("clicked"));
      return (
        <Container>
          <Wrapper>
            <Section> Content </Section>
            <AdBanner> Advertisment </AdBanner>
            <SomeBlock ref={nodeDiv}>
              Use ForwardRef() for descendents components
            </SomeBlock>
            <button ref={nodeButt}> Close </button>
          </Wrapper>
        </Container>
      );
    };

    Example

    Problem: to make the menu close by clicking on the external area and by clicking on the button. But since the button was under the outer area, the button script conflicted with the hook. Therefore, we add its link to the array of links that do not need to perform actions, so that the button script closes the menu.

    import useOnClickAdvanced from "useonclickadvanced";
    
    const Header = ({ setIsLight, isLight, keycloak }) => {
      const sideBar = useRef(null);
      const buttonClose = useRef(null);
    
      const { isMenuOpen, toggleMenuMode, toggleMenu, toggleMenuClose } =
        useContext(MenuContext);
    
      // you can pass 1 or more refs
      useOnClickAdvanced([sideBar, buttonCLose], () => toggleMenu(false));
    
      return (
        <Container>
          <HeaderRow>
            <Col>
              <NavLink to="/">
                <SiteLogo src={logo} />
              </NavLink>
            </Col>
    
            <Col lg="6">
              <Navigation direction="row" />
            </Col>
            <Col>
              <Account className="justify-content-end">
                <HamburgerButton
                  ref={buttonCLose}
                  isMenuOpen={isMenuOpen}
                  toggleMenuMode={toggleMenuMode}
                  toggleMenuClose={toggleMenuClose}
                />
              </Account>
            </Col>
          </HeaderRow>
          <SideMenu
            ref={sideBar}
            setIsLight={setIsLight}
            isLight={isLight}
            keycloak={keycloak}
          />
        </Container>
      );
    };
    
    export default Header;

    Install

    npm i useonclickadvanced

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    4.32 kB

    Total Files

    3

    Last publish

    Collaborators

    • amalkurbanbaev