Jupshot

Jupshot is a bunch of common user interaction effects. Some effects that cannot be created with CSS, or even with JavaScript they are difficult and time-consuming. Some of those common effects can easily be created in Jupshot.

Import functions like: slideToggle | slideUp | slideDown
Possible arguments: element, duration (optional), callback (optional)

JSX Code example:

import { slideToggle } from "j-upshot";

export default function Menu() {
  const toggleSubMenu = (e) => {
    e.preventDefault();

    slideToggle(e.currentTarget.nextElementSibling);
    e.currentTarget.classList.toggle("active");
  };

  return (
    <li className="has-child">
      <button onClick={toggleSubMenu}>About</button>
      <ul className="sub-menu">
        <li>
          <a href="#">Sub Item 1</a>
        </li>
        <li>
          <a href="#">Sub Item 2</a>
        </li>
      </ul>
    </li>
  );
}