I have a ponent like so:

import React from 'react'
import { bool } from 'prop-types'

const Component = ({ active, ...rest}) => (
  // ...does things
)

Component.propTypes = {
  active: bool.isRequired,
  // -> how do i handle { ...rest } here?
  rest: object // ? works, but is it the right solution?
}

Component destructures its props, grabbing the active prop and collecting the "rest" into rest. Is there a way to validate rest using prop-types? Is it required? Not sure what to do.

I have a ponent like so:

import React from 'react'
import { bool } from 'prop-types'

const Component = ({ active, ...rest}) => (
  // ...does things
)

Component.propTypes = {
  active: bool.isRequired,
  // -> how do i handle { ...rest } here?
  rest: object // ? works, but is it the right solution?
}

Component destructures its props, grabbing the active prop and collecting the "rest" into rest. Is there a way to validate rest using prop-types? Is it required? Not sure what to do.

• javascript
• reactjs
• ecmascript-6

• 1 There won't be a way to handle that through a loop without knowing all props ahead of time. You'll have to manually enter each value that you know could be a possible prop. – Chase DeAnda Commented Mar 9, 2018 at 16:25

2 Answers 2

https://www.ian-thomas/custom-proptype-validation-with-react/

Basically, prop-types does allow custom validation. You set it to

Component.propTypes = {
  rest: function(props, propName, ponentName) { // return null if all is well }
}

Although it's late, here I'm leaving a snippet of how I do things in case I want to extend a library or same concept can be utilized when building own ponent

(This is in case you don't want to use typescript and stay with plain old javascript)

import React from "react";
import PropTypes from "prop-types";
import { Button } from "reactstrap";

let BtnBaseProps = Object.assign(
  {
    leftIcon: "",
    rightIcon: "",
  },
  Button.prototype.props
);

/**
 *
 * @param {BtnBaseProps} props
 * @returns
 */
const BtnBase = (props) => {
  return (
    <Button {...props}>
      {props.leftIcon ? <i className={sicon + " mr-2"} /> : null}
      {props.children}
      {props.rightIcon ? <i className={eicon + " ml-2"} /> : null}
    </Button>
  );
};

BtnBase.propTypes = {
  leftIcon: PropTypes.string,
  rightIcon: PropTypes.string,
  ...(Button.propTypes && Button.propTypes),
};

export default BtnBase;