https://github.com/nirtamir2/react-base-transition-group

Open source library for managing component states (including mounting and unmounting) over time for css transitions and animations.
https://github.com/nirtamir2/react-base-transition-group

animation css css-transitions library react transition transition-group

Last synced: about 2 months ago
JSON representation

Open source library for managing component states (including mounting and unmounting) over time for css transitions and animations.

• Host: GitHub
• URL: https://github.com/nirtamir2/react-base-transition-group
• Owner: nirtamir2
• License: mit
• Created: 2019-12-02T21:02:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T02:10:20.000Z (over 3 years ago)
• Last Synced: 2025-10-24T05:16:37.753Z (8 months ago)
• Topics: animation, css, css-transitions, library, react, transition, transition-group
• Language: TypeScript
• Homepage:
• Size: 3.22 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/react-base-transition-group.svg)](https://badge.fury.io/js/react-base-transition-group)

# React Base Transition Group

Open source library for managing component states (including mounting and unmounting) over time for css transitions and animations.

Inspired by [react-transition-group](https://github.com/reactjs/react-transition-group).

The main difference is that you don't have to use the and instead you **Must** add transition / animation in order to unmount a child component.

## Install

```bash

yarn add react-base-transition-group

```

## Usage

[![Edit gifted-beaver-27o7m](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/gifted-beaver-27o7m?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&theme=dark)

```typescript jsx

import cx from "classnames";

import { TransitionGroup, Status } from "react-base-transition-group";

function App() {

  const [notifications, setNotification] = React.useState([

    { id: 1, title: "A" },

    { id: 2, title: "B" },

  ]);

  return (

     {

        return (

          


            {notification.title}

          

        );

      }}

    />

  );

}

```


You can see the examples in the example folder.

If you want the animation appear on the initial appear - you can set the prop `initialStatus` to be `Status.ENTERED`.