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

1.2.4 • Public • Published

TransitionsKit

A set of predefined transition components build on top of react-transition-gorup Implementation is based on Mui source code.

See the demo

Usage example

Fade:
<Fade in={open}>
    <img src='https://picsum.photos/400' />
</Fade>
Slide:
<Slide direction='up' in={checked} container={containerRef.current}>
    content
</Slide>
Grow:
<Grow in={open} timeout={500}>
    <img src='https://picsum.photos/400' />
</Grow>
Collapse:
<Collapse in={open} unmountOnExit>
    <img src='https://picsum.photos/400' />
</Collapse>
Zoom:
<Zoom in={open} timout={500}>
    <img src='https://picsum.photos/400' />
</Zoom>
Blur:
<Blur in={open} timout={500}>
    <img src='https://picsum.photos/400' />
</Blur>

Child requirements:

  • Forward the ref: The transition components require the first child element to forward its ref to the DOM node.
  • Single element: The transition components require only one child element (React.Fragment is not allowed).

Package Sidebar

Install

npm i transitions-kit

Weekly Downloads

1,475

Version

1.2.4

License

MIT

Unpacked Size

54.8 kB

Total Files

41

Last publish

Collaborators

  • ollylut