How to use @emotion/is-prop-valid - 10 common examples

const isTargetTag = isTag(as)

    let baseClassName = format(blockClassName)

    if (elementClassName) {
      baseClassName += `${elementSeparator}${format(elementClassName)}`
    }

    let fullClassName = baseClassName

    let key

    for (key in otherProps) {
      if (key === "forwardedComponent" || key === "as") continue
      else if (key === "forwardedRef") propsForElement.ref = otherProps[key]
      else if (!isTargetTag || validAttr(key)) {
        // Don't pass through non HTML tags through to HTML elements
        propsForElement[key] = otherProps[key]
      }

      if (modifiers.indexOf(key) > -1) {
        const mofifier = format(key)

        if (typeof otherProps[key] === "boolean") {
          if (otherProps[key]) {
            fullClassName += " "
            fullClassName += `${baseClassName}${modifierSeparator}${mofifier}`
          }
        } else {
          const value = otherProps[key]
          fullClassName += " "
          fullClassName += `${baseClassName}${modifierSeparator}${mofifier}${modifierValueSeparator}${value}`

const Styled = (props: StyledProps) => {
      const {as, className} = props
      // $FlowFixMe theming ThemeContext types need to be fixed.
      const theme = React.useContext(ThemeContext)
      const classes = useStyles({...props, theme})
      const childProps: StyledProps = ({}: any)

      for (const prop in props) {
        // We don't want to pass non-dom props to the DOM,
        // but we still want to forward them to a users component.
        if (isTagName && !isPropValid(prop)) continue
        if (shouldForwardProp && shouldForwardProp(prop) === false) continue
        childProps[prop] = props[prop]
      }
      // $FlowIgnore we don't care label might not exist in classes.
      const classNames = `${classes[label] || classes.css || ''} ${classes.cssd || ''}`.trim()
      childProps.className = className ? `${className} ${classNames}` : classNames

      return React.createElement(as || type, childProps)
    }

const render = (props, ref) => {
      const { as: component = tag, class: className, ...rest } = props;

      let filteredProps;

      // Check if it's an HTML tag and not a custom element
      if (typeof component === 'string' && component.indexOf('-') === -1) {
        filteredProps = {};

        // eslint-disable-next-line guard-for-in
        for (const key in rest) {
          if (key === 'as' || validAttr(key)) {
            // Don't pass through invalid attributes to HTML elements
            filteredProps[key] = rest[key];
          }
        }
      } else {
        filteredProps = rest;
      }

      filteredProps.ref = ref;
      filteredProps.className = cx(
        filteredProps.className || className,
        options.class
      );

      const { vars } = options;

isPropValid = (key: string) => {
        // Handle events explicitly as Emotion validates them all as true
        if (key.startsWith("on")) {
            return !isValidMotionProp(key)
        } else {
            return emotionIsPropValid(key)
        }
    }
} catch {

module.exports = memoize(prop => isPropValid(prop) && !regex.test(prop))

  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})>(

  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})>(

  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size'
})`

  shouldForwardProp: (prop) => prop !== 'direction' && isPropValid(prop)
})(({ isSorted, direction, theme: baseTheme }) => {

shouldForwardProp: name =>
      !['width', 'size', 'height', 'css', 'color'].includes(name) && isPropValid(name),
  })(