Transitions

    Bootstrap includes a few general use CSS transitions that can be applied to a number of components. React Bootstrap, bundles them up into a a few composable <Transition> components from react-transition-group, a commonly used animation wrapper for React.

    Encapsulating animations into components has the added benefit of making them more broadly useful, as well as portable for using in other libraries. All React-bootstrap components that can be animated, support pluggable <Transition> components.

    Collapse

    Add a collapse toggle animation to an element or component.

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false,
    };
  }

  render() {
    const { open } = this.state;
    return (
      <>
        <Button
          onClick={() => this.setState({ open: !open })}
          aria-controls="example-collapse-text"
          aria-expanded={open}
        >
          click
        </Button>
        <Collapse in={this.state.open}>
          <div id="example-collapse-text">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </Collapse>
      </>
    );
  }
}

render(<Example />);
    Press esc to disable tab trapping

    Fade

    Add a fade animation to a child element or component.

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false,
    };
  }

  render() {
    const { open } = this.state;
    return (
      <>
        <Button
          onClick={() => this.setState({ open: !open })}
          aria-controls="example-fade-text"
          aria-expanded={open}
        >
          Toggle text
        </Button>
        <Fade in={this.state.open}>
          <div id="example-fade-text">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </Fade>
      </>
    );
  }
}

render(<Example />);
    Press esc to disable tab trapping

    API

    Collapseview source file

    import Collapse from 'react-bootstrap/Collapse'
    NameTypeDefaultDescription
    appear
    boolean
    		false

    Run the expand animation when the component mounts, if it is initially shown

    dimension
    'height' | 'width' | function
    		'height'

    The dimension used when collapsing, or a function that returns the dimension

    Note: Bootstrap only partially supports 'width'! You will need to supply your own CSS animation for the .width CSS class.

    getDimensionValue
    function
    		element.offsetWidth | element.offsetHeight

    Function that returns the height or width of the animating DOM node

    Allows for providing some custom logic for how much the Collapse component should animate in its specified dimension. Called with the current dimension prop value and the DOM node.

    in
    boolean
    		false

    Show the component; triggers the expand or collapse animation

    mountOnEnter
    boolean
    		false

    Wait until the first "enter" transition to mount the component (add it to the DOM)

    onEnter
    function

    Callback fired before the component expands

    onEntered
    function

    Callback fired after the component has expanded

    onEntering
    function

    Callback fired after the component starts to expand

    onExit
    function

    Callback fired before the component collapses

    onExited
    function

    Callback fired after the component has collapsed

    onExiting
    function

    Callback fired after the component starts to collapse

    role
    string

    ARIA role of collapsible element

    timeout
    number
    		300

    Duration of the collapse animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled

    unmountOnExit
    boolean
    		false

    Unmount the component (remove it from the DOM) when it is collapsed

    Fadeview source file

    import Fade from 'react-bootstrap/Fade'
    NameTypeDefaultDescription
    appear
    boolean
    		false

    Run the fade in animation when the component mounts, if it is initially shown

    in
    boolean
    		false

    Show the component; triggers the fade in or fade out animation

    mountOnEnter
    boolean
    		false

    Wait until the first "enter" transition to mount the component (add it to the DOM)

    onEnter
    function

    Callback fired before the component fades in

    onEntered
    function

    Callback fired after the has component faded in

    onEntering
    function

    Callback fired after the component starts to fade in

    onExit
    function

    Callback fired before the component fades out

    onExited
    function

    Callback fired after the component has faded out

    onExiting
    function

    Callback fired after the component starts to fade out

    timeout
    number
    		300

    Duration of the fade animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled

    unmountOnExit
    boolean
    		false

    Unmount the component (remove it from the DOM) when it is faded out