frankwallis / react-slidedown Goto Github PK

React component which uses CSS to animate a child from its current height to { height: auto } when mounting/updating/unmounting.

License: MIT License

CSS 5.24% JavaScript 2.35% HTML 2.76% TypeScript 89.64%

react-slidedown's Introduction

react-slidedown

React component which uses CSS to animate a child from its current height to height: auto when mounting/updating/unmounting.

Live Demo

Overview

CSS does not currently support animating element height to height: auto and so normally javascript is used to achieve this effect.

This component uses CSS to perform the animation, following an algorithm (first described here). The desired height of the element is calculated, and then css is used to transition that height. After the transition has completed the height is set to height: auto.

react-slidedown is perfect for dropdown lists, popup menus, accordions and closeable panels which have varying sized content.

I am not aware of any cross-browser issues from IE10 and onwards.

Installation

npm install react-slidedown --save

Usage

Simply wrap the component you want to slide with the SlideDown component:

import React from 'react'

import {SlideDown} from 'react-slidedown'
import 'react-slidedown/lib/slidedown.css'

export function MyDropdown(props) {
  return (
    <SlideDown className={'my-dropdown-slidedown'}>
      {props.open ? props.children : null}
    </SlideDown>
  )
}

In the example above the css file needed by react-slidedown is included via JavaScript which is the normal way of doing things when using webpack css-loader, it is also populated in the style property of package.json so if you are using parcelify it should get included automatically. Otherwise it is also possibe to import it from css:

@import "node_modules/react-slidedown/lib/slidedown.css";

Props

Property	Type	Default	Required?	Description
children	Children		No	When provided the component opens and when removed the component closes
closed	Boolean		No	If `true` the component will close even if children are provided
className	String		No	CSS class name to be used in addition to the `react-slidedown` class name
transitionOnAppear	Boolean	`true`	No	Do a transition animation on initial mount
as	String	`div`	No	The outermost Element type to render

Example

To quickly see a live demonstration of react-slidedown go here.

To build and run this example project:

git clone https://github.com/frankwallis/react-slidedown.git
cd react-slidedown
npm install
npm start

Customisation

You can customise the transition used for the animation by overriding styles on the SlideDown component:

.react-slidedown.my-dropdown-slidedown {
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

The default values used are:

.react-slidedown {
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

react-slidedown's People

Contributors

Stargazers

Watchers

react-slidedown's Issues

Height calculated incorrectly

When using long lists, the height is calculated incorrectly and there is a pause / jump between where it animates and when the height is set to auto.

SlideDown will sometimes keep displaying old content, even after it's removed

Hi!

First of all, thank you so much for this library - it's just what I needed! 👍

The problem

Though there is one problem. Sometimes, when quickly alternating 2 pages, they will both keep being visible - even though one shouldn't be there anymore.

You can see it fail here by clicking the "Click me to change page!" button multiple times quickly. You can also see the repository here.

The fix

I think this has something to do with the component updating while animating, as it can be fixed by making SlideDownContent a PureComponent.

I don't see any downsides to changing it to a PureComponent, but I haven't tested it thoroughly. I just noticed it fixes my problem.

The use case

I am using this module to switch between 2 pages like in the test. When the user submits a form, it changes to page 2. If the form submit fails (maybe user entered wrong info?), the page changes back. This can sometimes happen very quickly - hence why this is a problem.

The thanks

Once again, thanks for this component! I (and many others) greatly appreciate the effort you put into it.

Opened item does not close

Hi,

I have code as below:

const KnowledgeItem = ({title: title, text: text}) =>{
    const [open, setOpen] = useState(null);
    const textBox = <div>{text}</div>;
    return(
        <div>
            <button onClick={()=> {
                setOpen(!open)
            }
            }>↓</button>
            <span>{title}</span>
            <SlideDown closed={open}>
                {open && textBox}
            </SlideDown>
        </div>
    );
};

Initial state of component is null and SlideDown is close.
I click button and open change to true – SlideDown is now open .
I click button once again and open change to false – SlideDown is still open.

What I did wrong?

this.outerRef – TS2531: Object is possibly 'null'.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I have a problem with the types (TS2531: Object is possibly 'null'. on this.outerRef)

Here is the diff that solved my problem:

diff --git a/node_modules/react-slidedown/lib/slidedown.tsx b/node_modules/react-slidedown/lib/slidedown.tsx
index 9c28156..5acba78 100644
--- a/node_modules/react-slidedown/lib/slidedown.tsx
+++ b/node_modules/react-slidedown/lib/slidedown.tsx
@@ -77,8 +77,8 @@ class SlideDownContent extends Component<SlideDownContentProps, SlideDownContent
         }
     }
 
-    componentDidUpdate(_prevProps, _prevState, snapshot: string | null) {
-        if (this.outerRef) {
+    componentDidUpdate(_prevProps: any, _prevState: any, snapshot: string | null) {
+        if (this.outerRef && snapshot) {
             this.startTransition(snapshot)
         }
     }
@@ -86,13 +86,13 @@ class SlideDownContent extends Component<SlideDownContentProps, SlideDownContent
     private startTransition(prevHeight: string) {
         let endHeight = '0px'
 
-        if (!this.props.closed && !this.state.childrenLeaving && this.state.children) {
+        if (this.outerRef && !this.props.closed && !this.state.childrenLeaving && this.state.children) {
             this.outerRef.classList.remove('closed')
             this.outerRef.style.height = 'auto'
             endHeight = getComputedStyle(this.outerRef).height
         }
 
-        if (parseFloat(endHeight).toFixed(2) !== parseFloat(prevHeight).toFixed(2)) {
+        if (this.outerRef && parseFloat(endHeight).toFixed(2) !== parseFloat(prevHeight).toFixed(2)) {
             this.outerRef.classList.add('transitioning')
             this.outerRef.style.height = prevHeight
             this.outerRef.offsetHeight // force repaint
@@ -102,12 +102,14 @@ class SlideDownContent extends Component<SlideDownContentProps, SlideDownContent
     }
 
     private endTransition() {
-        this.outerRef.classList.remove('transitioning')
-        this.outerRef.style.transitionProperty = 'none'
-        this.outerRef.style.height = this.props.closed ? '0px' : 'auto'
+        if (this.outerRef) {
+            this.outerRef.classList.remove('transitioning')
+            this.outerRef.style.transitionProperty = 'none'
+            this.outerRef.style.height = this.props.closed ? '0px' : 'auto'
 
-        if (this.props.closed || !this.state.children) {
-            this.outerRef.classList.add('closed')
+            if (this.props.closed || !this.state.children) {
+                this.outerRef.classList.add('closed')
+            }
         }
     }

This issue body was partially generated by patch-package.

SSR rendering problem

On SSR there is empty space between the slidedown.
Inline css is being added to the element.
In my case

{
    height: 8004.22px;
    transition-property: height;
}

rename "closed" prop to "open" ?

It doesn't make sense that when closed is set to false, then the component renders as closed...

Inner Elements with margin not handled properly

Hi frankwallis,

nice component. Thanks.

Suppose you slide down this child:

<div class="react-slidedown" style="height: auto; transition-property: none;">
<!-- The child -->
<p>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor...</p>
</div>

If <p> has margins, you get a "hopp" at the end of the transition. Probably, the top margin of the first child and the bottom margin of the last child mess up with the height calculation.

I worked around with something like that:

p:first-child {
      margin-top : 0rem;
}
p:last-child {
       margin-bottom : 0rem;
}

Could this be fixed?

Thanks for sharing your code
Stefan

Possible to render when closed?

Hi, thanks for this tool. It works great, better than alternatives.

I am wondering if it's possible to still render the content inside the SlideDown when the condition is false, and have it hide only by CSS. Something like

<SlideDown>
                  {visible ? <div>Visible<div/> : <div>Renders but hidden by CSS<div/>}
</SlideDown>

The reason is that I would only like to hide the contents on certain screen sizes. I though I could use a CSS media quary to revert the hiding, and still keep the slide down transitions on other screen sizes.

Does this make sense?

Thanks

Is there a way to handle animation start\end events in my dropdown component?

Hi, I'm using slide down with downshift react lib and it seems their properties dramatically slows down animation. I wonder if there is a way to catch animation start\finish events and make conditional properties set like {...(!isToggling && getMenuProps())}

<SlideDown> { isOpen && <ul {...getMenuProps()}> { props.data.map((item, index) => ( <li key={index} {...(getItemProps({item, index }))}>{item.label} </li> )) } </ul> } </SlideDown>

Support react 17

The project declare a peer dependency to react 16.
This prevent downstream projects to use react 17.

Can you please update to react 17?

Thank you very much

Slide Up Animation is missing and only Moves down . Could be a nice addtion

Can we add a Slide up to after Slide Down , without the Slide Up it feels like the Component shrinks and flows again from the Top. Which is not the best of experience .

working Issue Link - https://stackblitz.com/edit/react-missingslidedown?file=index.js

SlideDown stops working after several clicks

Having a weird bug with this:

My SlideDown contains a parent div which maps an array to show details. Now after a few clicks to open/close the SlideDown, the parent div will display behind the rest of my other SlideDown components below it rather than pushing them down the page. Another click will push them down the page but then any further clicks the SlideDown just stops working. It won't collapse or expand my parent div leaving it stuck in an open state.

I cannot figure out why this is happening, as it happens at random times.

Could you add a demo?

Thanks for react-slidedown. I came across your project searching some react-like alternative for jQuery's slideDown. I think I'll just use jQuery from within react, but looking at your README i thought: Could you add a little, simple demo at codepen or https://codesandbox.io/ ? A simple demo page tells more than thousands words :)

If possible maybe also a browser matrix, e.g. is IE 10/11 supported?

Compatibility with react-test-renderer

Hello, thank you for writing this component! It's been a big help to me so far. The component works perfectly in the production build but I am having a problem with jest tests which use the react-test-renderer. This is maybe not something that you intend to support but thought I would send on details regardless.

The Problem

Versions

"react-test-renderer": "^16.6.3"
"jest": "^22.4.2"
"react-slidedown": "^1.3.0"
"react": "^16.4.2"
"antd": "^3.8.1"

Description

Here is an example component I would like to test using the react-test-renderer.

import * as React from 'react';
import {SlideDown} from 'react-slidedown';
import {Icon} from 'antd';

import './InteractiveListCard.css';
import 'react-slidedown/lib/slidedown.css';

export type InteractiveCardTypeProps<T> = {
    header: string,
    style?: any,
    model: T,
    onDrag?: (event: any) => void,
    onDrop?: (event: any) => void,
    onDelete?: (event: any) => void
    onUp?: (model: T) => void
    onDown?: (model: T) => void
    defaultAsCollapsed?: boolean
}

export type InteractiveCardTypeState = {
    collapsed: boolean,
    transitioning: boolean
}

export class InteractiveListCard<T> extends React.Component<InteractiveCardTypeProps<T>, InteractiveCardTypeState> {

    constructor(props: InteractiveCardTypeProps<T>){
        super(props);
        this.state = {
            collapsed: props.defaultAsCollapsed || false,
            transitioning: false
        };
    }

    transition(event: any){
        if(!this.state.transitioning){
            this.setState({transitioning: true});
        }
    }

    completeTransition(event: any){
        if(this.state.transitioning){
            this.setState({transitioning: false, collapsed: !this.state.collapsed});
        }
    }

    onUp(event: any) {
        if(this.props.onUp && this.props.model){
            return this.props.onUp(this.props.model);
        }
    }

    onDown(event: any) {
        if(this.props.onDown && this.props.model){
            return this.props.onDown(this.props.model);
        }
    }

    onDelete(event: any){
        if(this.props.onDelete && this.props.model){
            return this.props.onDelete(this.props.model);
        }
    }

    render(){

        const contentDisplayedClass: string = 'ant-collapse-content ' + (this.state.collapsed ? 'ant-collapse-content-inactive': 'ant-collapse-content-active');

        // Animation logic
        let arrowClasses: string = 'arrow';
        if(this.state.transitioning && this.state.collapsed){
            arrowClasses += ' rotate_clockwise rotated';
        }
        else if(this.state.transitioning && !this.state.collapsed){
            arrowClasses += ' rotate_anticlock';
        }
        else if(!this.state.transitioning && !this.state.collapsed){
            arrowClasses += ' rotated';
        }

        return (
            <div className="ant-collapse" style={this.props.style} onAnimationEnd={this.completeTransition.bind(this)}>
                <div className="ant-collapse-item ant-collapse-item-active">
                    <div className="ant-collapse-header" >
                        <div role="button" tabIndex={0} onClick={this.transition.bind(this)}><i className={arrowClasses} /></div>
                        <div style={{display: 'flex'}}>
                            <div>{this.props.header}</div>
                            <div style={{marginLeft: 'auto', marginRight: 10}}>
                                <Icon type={'up-circle'} onClick={this.onUp.bind(this)} />
                                <Icon type={'down-circle'} style={{marginLeft: 10}} onClick={this.onDown.bind(this)}/>
                                <Icon type={'delete'} style={{marginLeft: 10}} onClick={this.onDelete.bind(this)}/>
                            </div>
                        </div>
                    </div>
                </div>
                <SlideDown closed={this.state.collapsed}>
                    <div className={contentDisplayedClass}>
                        <div className='ant-collapse-content-box'>
                            {this.props.children}
                        </div>
                    </div>
                </SlideDown>
            </div>

        )
    }
}

And here is an example test I would like to run to check that my component is being rendered in an identical manner.

import * as React from 'react';
import * as Renderer from "react-test-renderer";
import {InteractiveListCard, InteractiveCardTypeProps} from '../InteractiveListCard';
import {DisplayField} from '../../../common/Types'


describe('InteractiveListCard Component Tests', () => {

    type DisplayFieldInteractiveCard = new() => InteractiveListCard<DisplayField>;
    const TestComponent = InteractiveListCard as DisplayFieldInteractiveCard;

    const demoDisplayField: DisplayField = {
        position: 0,
        is_default: true,
        can_filter: true,
        help_text: 'Help me please!',
        field: 'demo_field',
        field_verbose: 'demo_field',
        field_type: 'CharField',
        path: 'example__',
        path_verbose: 'example__',
        name: 'Demonstration Field'
    };

    const testProps: InteractiveCardTypeProps<DisplayField> = {
        header: demoDisplayField.name,
        model: demoDisplayField,
        defaultAsCollapsed: false
    };

    it('Matches the snapshot when collapsed', () => {
        testProps.defaultAsCollapsed = true;
        const tree = Renderer.create(<TestComponent {...testProps}/>).toJSON();
        expect(tree).toMatchSnapshot();
    });

    it('Matches the snapshot when open', () => {
        testProps.defaultAsCollapsed = false;
        const tree = Renderer.create(<TestComponent {...testProps}/>).toJSON();
        expect(tree).toMatchSnapshot();
    });

});

When the tests are run, the following stack trace is generated for the 'Matches the snapshot when collapsed' case

TypeError: Cannot read property 'classList' of null

    at SlideDownContent.Object.<anonymous>.SlideDownContent.componentDidMount (.../node_modules/react-slidedown/lib/slidedown.js:31:26)
    at commitLifeCycles (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8287:22)
    at commitAllLifeCycles (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9583:7)
    at HTMLUnknownElement.callCallback (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2331:14)
    at invokeEventListeners (.../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
    at HTMLUnknownElementImpl._dispatch (.../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
    at HTMLUnknownElementImpl.dispatchEvent (.../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
    at HTMLUnknownElementImpl.dispatchEvent (.../node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
    at HTMLUnknownElement.dispatchEvent (.../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
    at Object.invokeGuardedCallbackDev (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2381:16)
    at invokeGuardedCallback (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2434:31)
    at commitRoot (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9779:7)
    at completeRoot (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11210:3)
    at performWorkOnRoot (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11139:9)
    at performWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11047:7)
    at performSyncWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11021:3)
    at requestWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10890:5)
    at scheduleWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10700:5)
    at scheduleRootUpdate (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11287:3)
    at updateContainerAtExpirationTime (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11315:10)
    at updateContainer (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11326:10)
    at Object.create (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11842:5)
    at Object.<anonymous> (.../src/components/General/__tests__/InteractiveListCard.test.tsx:38:29)
    at Object.asyncFn (.../node_modules/jest-jasmine2/build/jasmine_async.js:82:37)
    at resolve (.../node_modules/jest-jasmine2/build/queue_runner.js:52:12)
    at new Promise (<anonymous>)
    at mapper (.../node_modules/jest-jasmine2/build/queue_runner.js:39:19)
    at promise.then (.../node_modules/jest-jasmine2/build/queue_runner.js:73:82)
    at process._tickCallback (internal/process/next_tick.js:68:7)

And for the 'Matches the snapshot when open' test case...

TypeError: Cannot read property 'classList' of null

    at SlideDownContent.Object.<anonymous>.SlideDownContent.startTransition (.../node_modules/react-slidedown/lib/slidedown.js:72:26)
    at SlideDownContent.Object.<anonymous>.SlideDownContent.componentWillAppear (.../node_modules/react-slidedown/lib/slidedown.js:36:18)
    at TransitionGroup._this.performAppear (.../node_modules/react-transition-group/TransitionGroup.js:58:19)
    at TransitionGroup.componentDidMount (.../node_modules/react-transition-group/TransitionGroup.js:156:14)
    at commitLifeCycles (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8287:22)
    at commitAllLifeCycles (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9583:7)
    at HTMLUnknownElement.callCallback (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2331:14)
    at invokeEventListeners (.../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
    at HTMLUnknownElementImpl._dispatch (.../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
    at HTMLUnknownElementImpl.dispatchEvent (.../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
    at HTMLUnknownElementImpl.dispatchEvent (.../node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
    at HTMLUnknownElement.dispatchEvent (.../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
    at Object.invokeGuardedCallbackDev (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2381:16)
    at invokeGuardedCallback (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2434:31)
    at commitRoot (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9779:7)
    at completeRoot (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11210:3)
    at performWorkOnRoot (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11139:9)
    at performWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11047:7)
    at performSyncWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11021:3)
    at requestWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10890:5)
    at scheduleWork (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10700:5)
    at scheduleRootUpdate (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11287:3)
    at updateContainerAtExpirationTime (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11315:10)
    at updateContainer (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11326:10)
    at Object.create (.../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11842:5)
    at Object.<anonymous> (.../src/components/General/__tests__/InteractiveListCard.test.tsx:43:29)
    at Object.asyncFn (.../node_modules/jest-jasmine2/build/jasmine_async.js:82:37)
    at resolve (.../node_modules/jest-jasmine2/build/queue_runner.js:52:12)
    at new Promise (<anonymous>)
    at mapper (.../node_modules/jest-jasmine2/build/queue_runner.js:39:19)
    at promise.then (.../node_modules/jest-jasmine2/build/queue_runner.js:73:82)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Candidate Solution

Only apply the changes to styles and classes when the element is present.

     SlideDownContent.prototype.startTransition = function (prevHeight) {
        var endHeight = '0px';
        if(this.element) {
            if (!this.props.closed) {
                this.element.classList.remove('closed');
                this.element.style.height = 'auto';
                endHeight = getComputedStyle(this.element).height;
            }
            if (parseFloat(endHeight).toFixed(2) !== parseFloat(prevHeight).toFixed(2)) {
                this.element.classList.add('transitioning');
                this.element.style.height = prevHeight;
                this.element.offsetHeight;
                this.element.style.transitionProperty = 'height';
                this.element.style.height = endHeight;
            }
        }
    };

    SlideDownContent.prototype.componentDidMount = function () {
        if (this.props.closed && this.element)
            this.element.classList.add('closed');
    };

This feels like a very hacky fix but generates snapshots which can be used by the react-test-renderer for comparison. If this fix is inappropriate or a better fix can be proposed then please let me know. If any further information is required then I'm happy to expand upon my explanation.

Once again, thank you for the component! It's really appreciated!

Delay option

This would be a nice addition to have two slide animations after each other.

Change height from auto?

I would like to be able to change the height from auto to custom sizes. When I try to do this, the existing style height: auto; overrides my class style name. I also tried to place it in my .css file in an attempt to override it, but this did not work either.

Would appreciate the help here!

Custom classnames

Guess this is a simple one, could we allow to customize the classnames of the SlideDown component with props?
In my opinion className should overwrite the default class name, not extend it. closedClassName could be used to overwrite the closed classname.

What do you think?

Support for React 18

currently only supporting up to v18, is it possible to add 18?

Missing .tsx in published package for sourcemaps

What is the problem
The sourcemaps need the source slidedown.tsx to work properly. Unfortunately I couldn't find a release script, so I guess you might release manually.

How to fix this
You only have to include slidedown.tsx in the release itself.

Slide up transition is not working with React-table

Tried using this library with react-tables. The slide down works but when closing the expanded tab, the transition animation does not work. Any ideas why?
Thanks!

Not open between multi items

when have an multi items slide down not open between items. have you ever solve this issue?

license

This is a great library however, I've noticed that there is no license.

Horizontal scrollbar is visible during animation

Issue description

During the slide down animation, a horizontal scrollbar temporarily appears. It disappears when the animation completes.

Steps to reproduce the issue

This is not visible on the demo and I have not cloned the repo to test it, so this may be specific to my project. However, given that my setup is fairly typical - React with react-bootstrap using Bootstrap v5 - I imagine that it will appear for others. I am animating the opening and closing of a Bootstrap row.

Here is my code:

import React, { useEffect, useState } from "react";
import { Col, Form, Row } from "react-bootstrap";
import SlideDown from "react-slidedown";
import "react-slidedown/lib/slidedown.css";

// Rest of component...

<SlideDown className="my-dropdown-slidedown" closed={isClosed}>
	<Form.Group as={Row} className="justify-content-center mt-2">
		<Form.Label column sm={3}>Street:</Form.Label>
		<Col sm={6}>
			<Form.Control
				type="text"
				name="street"
				required
			/>
		</Col>
	</Form.Group>
</SlideDown>

Solution

I resolved this issue by applying the following CSS:

.my-dropdown-slidedown {
    overflow-x: hidden;
}

I can create a PR later for this; it would be great if @frankwallis could sanity check this.

Additional details / screenshot

Show / hide GIF