# styled-transition-group

> Write react-transition-group animations with styled-components

Latest version **2.0.1** (published 2020-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-transition-group
pnpm add styled-transition-group
yarn add styled-transition-group
bun add styled-transition-group
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-02-20 |
| First published | 2017-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 83 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 158 |
| Author | Gabriela Seabra |
| Maintainers | gabiseabra |

## Links

- npm: https://www.npmjs.com/package/styled-transition-group
- Repository: https://github.com/gabiseabra/styled-transition-group
- Homepage: https://github.com/gabiseabra/styled-transition-group#readme
- Issues: https://github.com/gabiseabra/styled-transition-group/issues
- npm.io page: https://npm.io/package/styled-transition-group

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [lodash.invert](https://npm.io/package/lodash.invert.md) ^4.3.0
- [lodash.isempty](https://npm.io/package/lodash.isempty.md) ^4.4.0

## Recent versions

- 2.0.1 (latest) — 2020-02-20
- 2.0.0 — 2019-03-27
- 1.0.0 — 2018-02-21
- 1.0.0-rc.3 — 2018-01-24
- 1.0.0-rc.2 — 2018-01-24
- 1.0.0-rc.1 — 2018-01-23
- 1.0.0-rc — 2018-01-22
- 0.2.1 — 2018-01-04
- 0.2.0 — 2017-12-23
- 0.1.4 — 2017-12-16
- 0.1.3 — 2017-12-15
- 0.1.2 — 2017-12-15
- 0.1.1 — 2017-12-15

## README

# Styled Transition Group

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

Inspired by issue [#1036](https://github.com/styled-components/styled-components/issues/1036) of styled-components, this package exports a `styled` object for generating animations with react-transition-group's `CSSTransition`.

## Getting Started

Add `styled-transition-group` and it's peer dependencies to your package:
`styled-transition-group@1` is compatible with `styled-components` v2 - v3.
`styled-transition-group@2` is compatible with `styled-components` v4.

```shell
yarn add styled-components react-transition-group
yarn add styled-transition-group
```

## Usage

The `transition` object has the same interface as styled-component's `styled` object, except it wraps the target component in a `CSSTransition` component and passes down it's props.

### Basic

To style a transition state use an `&:{state}` selector. See [react-transition-group's docs](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames) for available transition states (State names are hyphenated).

[Live example on Stackblitz](https://stackblitz.com/edit/01-styled-transition-group?file=Fade.js)

```jsx
import transition from "styled-transition-group";

const Fade = transition.div`
  &:enter { opacity: 0.01; }
  &:enter-active {
    opacity: 1;
    transition: opacity 1000ms ease-in;
  }
  &:exit { opacity: 1; }
  &:exit-active {
    opacity: 0.01;
    transition: opacity 800ms ease-in;
  }
`;
```

### Attach transition props

Styled component's `attrs()` method can be used to attach transition props to a component. Props unrelated to CSSTransition are passed to the child component.

[Live example on Stackblitz](https://stackblitz.com/edit/02-styled-transition-group?file=Fade.js)

```jsx
import transition from "styled-transition-group";

const Fade = transition.div.attrs({
  unmountOnExit: true,
  timeout: 1000
})`
  &:enter { opacity: 0.01; }
  &:enter-active {
    opacity: 1;
    transition: opacity 1000ms ease-in;
  }
  &:exit { opacity: 1; }
  &:exit-active {
    opacity: 0.01;
    transition: opacity 800ms ease-in;
  }
`;
```

### Transition Group

Styled transitions can be used with `TransitionGroup`

[Live example on Stackblitz](https://stackblitz.com/edit/03-styled-transition-group?file=Fade.js)

### Selectors

Using `styled-transition-group`'s css helper, selectors can target the transition it's included in (`&`) or other transition components. It replaces the selectors with the actual `styled-transition-group` component's class names.

_Warning:_ Nesting doesn't work here. `&` targets the top level component regardless of nesting.

```jsx
import styled from "styled-components";
import transition, { css } from "styled-transition-group";

const Fade = transition.div` /* ... */ `;

const style = css`
  ${Fade}:enter & {
    color: green;
  }
  ${Fade}:exit & {
    color: red;
  }
`;

const Button = styled.div`
  ${style} /* ... */
`;
```

[Live example on Stackblitz](https://stackblitz.com/edit/04-styled-transition-group?file=Text.js)

---
_Source: https://npm.io/package/styled-transition-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._