feat: add ref to modal

reactstrap · Mar 8, 2023 · 8f5e219 · 8f5e219
1 parent fc539c9
commit 8f5e219
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/ModalBody.js b/src/ModalBody.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
@@ -15,15 +15,15 @@ const defaultProps = {
   tag: 'div',
 };
 
-function ModalBody(props) {
+const ModalBody = forwardRef((props, ref) => {
   const { className, cssModule, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'modal-body'),
     cssModule,
   );
 
-  return <Tag {...attributes} className={classes} />;
-}
+  return <Tag {...attributes} className={classes} ref={ref} />;
+});
 
 ModalBody.propTypes = propTypes;
 ModalBody.defaultProps = defaultProps;

diff --git a/src/ModalFooter.js b/src/ModalFooter.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
@@ -16,15 +16,15 @@ const defaultProps = {
   tag: 'div',
 };
 
-function ModalFooter(props) {
+const ModalFooter = forwardRef((props, ref) => {
   const { className, cssModule, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'modal-footer'),
     cssModule,
   );
 
-  return <Tag {...attributes} className={classes} />;
-}
+  return <Tag {...attributes} className={classes} ref={ref} />;
+});
 
 ModalFooter.propTypes = propTypes;
 ModalFooter.defaultProps = defaultProps;

diff --git a/src/ModalHeader.js b/src/ModalHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
@@ -25,7 +25,7 @@ const defaultProps = {
   closeAriaLabel: 'Close',
 };
 
-function ModalHeader(props) {
+const ModalHeader = forwardRef((props, ref) => {
   let closeButton;
   const {
     className,
@@ -56,14 +56,14 @@ function ModalHeader(props) {
   }
 
   return (
-    <WrapTag {...attributes} className={classes}>
+    <WrapTag {...attributes} className={classes} ref={ref}>
       <Tag className={mapToCssModules('modal-title', cssModule)}>
         {children}
       </Tag>
       {close || closeButton}
     </WrapTag>
   );
-}
+});
 
 ModalHeader.propTypes = propTypes;
 ModalHeader.defaultProps = defaultProps;