mounty
TypeScript icon, indicating that this package has built-in type declarations

1.5.2 • Public • Published

mounty npm

A tiny React transition manager with mount/unmount support and a familiar API.

Install

npm i mounty --save

Usage

The code below is demoed here.

import { Mounty } from "mounty";

function App() {
  const [active, setActive] = React.useState(false);

  return (
    <>
      <button onClick={() => setActive(!active)}>Click to Pin</button>

      <Mounty in={active} timeout={400} shouldUnmount>
        {({ active, ready, entering, entered, exiting, exited }) => {
          return (
            <div
              style={{
                opacity: ready ? 1 : 0,
                transition: "opacity 400ms",
              }}
            >
              I'm automatically mounted & unmounted, and I fade in and out while
              doing it!
            </div>
          );
        }}
      </Mounty>
    </>
  );
}

render(<App />, document.getElementById("root"));

License

MIT License © Truework

Package Sidebar

Install

npm i mounty

Weekly Downloads

1

Version

1.5.2

License

MIT

Unpacked Size

21.2 kB

Total Files

11

Last publish

Collaborators

  • estrattonbailey
  • truework-team