I have a ButtonDefault component which has following propTypes:
ButtonDefault.propTypes = {
type: PropTypes.string,
text: PropTypes.string.isRequired,
disabled: PropTypes.bool,
hidden: PropTypes.bool,
iconClass: PropTypes.string,
to: PropTypes.string,
handleClick: PropTypes.func,
size: PropTypes.string,
iconColor: PropTypes.string,
fontWeight: PropTypes.string,
paddingRight: PropTypes.string,
paddingTop: PropTypes.string,
paddingBottom: PropTypes.string,
paddingLeft: PropTypes.string,
hoverBorder: PropTypes.string,
iconLeft: PropTypes.bool,
iconSize: PropTypes.string,
transparent: PropTypes.bool,
};
I am using this component into another component named ButtonGroup now I want to just somehow reuse ButtonDefault propTypes into the ButtonGroup component propTypes
ButtonGroup.propTypes = {
buttons: PropTypes.arrayOf(PropTypes.shape({
...here I want to spread buttonDefault types
})),
};
I already tried keeping ButtonDefault props into an object & exporting it & importing it into ButtonGroup but it's not working how can I reuse it?
This is how I tried to export the buttonDefault types:
import { PropTypes } from 'prop-types';
export const buttonDefaultType = {
type: PropTypes.string,
text: PropTypes.string.isRequired,
disabled: PropTypes.bool,
hidden: PropTypes.bool,
iconClass: PropTypes.string,
to: PropTypes.string,
handleClick: PropTypes.func,
size: PropTypes.string,
iconColor: PropTypes.string,
fontWeight: PropTypes.string,
paddingRight: PropTypes.string,
paddingTop: PropTypes.string,
paddingBottom: PropTypes.string,
paddingLeft: PropTypes.string,
hoverBorder: PropTypes.string,
iconLeft: PropTypes.bool,
iconSize: PropTypes.string,
transparent: PropTypes.bool,
};
tried to use it in ButtonGroup component like this:
import React from 'react';
import PropTypes from 'prop-types';
import styles from './buttonGroup.module.scss';
import ButtonDefault from 'src/components/atoms/Button/ButtonDefault';
import * as type from 'src/types';
const ButtonGroup = ({ buttons }) => (
<>
<div className={styles['btn-group']}>
{buttons.map(button => {
const { text, type, id, hidden, disabled } = button;
return <ButtonDefault type={type} text={text} key={id} hidden={hidden} disabled={disabled} />;
})}
</div>
</>
);
ButtonGroup.propTypes = {
buttons: PropTypes.arrayOf(
PropTypes.shape({
...type.buttonDefaultType, // not working
})
),
};
export default ButtonGroup;
When I try to console.log type.buttonDefaultType this is the result:
