CODEWITHSUNDEEP
reactjsreact-proptypes
rash
rash

Reputation: 141

how do you define the proptypes for the css classes that are passed from parent component?

here i am trying to define the props for the className which will be later passed by other parent components..

import React from 'react';
import PropTypes from 'prop-types';

const ButtonArrow = (props) => {
  const {
    className, width, height, fill
  } = props;
  return (
    <svg
      className={props.className}
      xmlns="http://www.w3.org/2000/svg"
      width={props.width}
      height={props.height}
      fill={props.fill}
      viewBox="0 0 18 18"
    >
      <path d="M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z" />
    </svg>
  );
};

Upvotes: 1

Views: 2492

Answers (2)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

It depends on how strict PropType should be. Is it just string or you are going to use this monstrosity ( custom validator )?

className: function(props, propName, componentName) {
    const className = props[propName];

    if(!className.includes('some-necessary-word')) {
      throw new Error("className: Invalid prop value");
    }
  }
}

Btw you are destructing prop yet you are not using its values

const ButtonArrow = (props) => {
  const {
    className, width, height, fill
  } = props;
  return (
    <svg
      className={`svg ${className}`}
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      fill={fill}
      viewBox="0 0 18 18"
    >
      <path d="M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z" />
    </svg>
  );
};

ButtonArrow.PropTypes = {
 width: PropTypes.string,
 height: PropTypes.string,
 fill: PropTypes.string,
 className: PropTypes.string
}

Upvotes: 0

Yousaf
Yousaf

Reputation: 29282

if you want props.className to be limited to a specific set of values, use PropTypes.oneOf(). It will treat props.className as an enum

PropTypes.oneOf(['classOne', 'classTwo'])

Upvotes: 1

Related Questions