How do I reuse prop-types when not using PropTypes.shape?

Viewed 294

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: enter image description here

1 Answers

You can do this by reusing or centralizing your proptypes. Basically exporting variables that define a certain type. The how of it is explained in this guide.

In your example you would do:

ButtonGroup.propTypes = {
  buttons: PropTypes.arrayOf(
    buttonDefaultType
  ),
};

Obviously you would need to import that buttonDefaultType first ;-)

Related