React Responsive Modal组件animationDuration属性使用方法咨询

Hey there! Let me break down exactly how to set the animationDuration prop for your react-responsive-modal, since it sounds like your previous attempts didn't work as expected.

The Correct Way to Set animationDuration #

You don't need to mess with state for this prop (unless you want to dynamically change the duration later) or modify the package's source files—just pass it directly as a prop to the Modal component, with a numeric value representing milliseconds.

Here's a complete working example, including the center prop you're already using:

import React, { useState } from 'react';
import Modal from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

function YourComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={handleOpenModal}>Open Custom Duration Modal</button>
      <Modal
        open={isModalOpen}
        onClose={handleCloseModal}
        center
        animationDuration={700} // Set your desired duration here (700ms in this case)
      >
        <h3>Custom Animation Speed</h3>
        <p>This modal fades in/out over 700 milliseconds!</p>
      </Modal>
    </div>
  );
}

export default YourComponent;

Why Your Previous Attempts Didn't Work #

• Putting animationDuration in state: This isn't necessary unless you need to dynamically adjust the duration (e.g., based on user input). If you do want dynamic control, you can still use state—just pass the state variable as the prop value, like animationDuration={customDuration}. Storing the prop itself in state doesn't help, though.
• Modifying package files: Editing the default value directly in the package's source code is a bad practice because any npm update will overwrite your changes. The component is designed to let you customize this via props, so there's no need for this workaround.

Quick Check #

Make sure you're using the latest version of react-responsive-modal—older versions might have had bugs or different prop behavior. You can update it with:

npm update react-responsive-modal

内容的提问来源于stack exchange，提问作者pycan