import PropTypes from 'prop-types';

/**
 * Conditionally render children based on the `active` prop. Note that the
 * children of this component will still be evaluated in the context of the
 * component in which you render `IfActive`, so it is not quite the same as
 * using a short-circuiting boolean expression like `&&`.
 */
const IfActive = function IfActive(props) {
  const {
    active,
    children
  } = props;
  if (!active) return null;
  return <>
      {children}
    </>;
};
IfActive.defaultProps = {
  active: false,
  children: null
};
IfActive.propTypes = {
  /**
   * Should the children of this component be rendered?
   */
  active: PropTypes.any,
  // eslint-disable-line react/forbid-prop-types
  /**
   * The children to conditionally render.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default IfActive;