styled-transition-group

    2.0.1 • Public • Published

    Styled Transition Group

    npm version

    Inspired by issue #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.

    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 for available transition states (State names are hyphenated).

    Live example on Stackblitz

    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

    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

    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.

    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

    Keywords

    none

    Install

    npm i styled-transition-group

    DownloadsWeekly Downloads

    4,713

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    85 kB

    Total Files

    22

    Last publish

    Collaborators

    • gabiseabra