Allow Link to render any valid component type #488
Conversation
src/Link.js
Outdated
| `Invalid prop '${propName}' supplied to '${componentName}': the prop is not a valid React component` | ||
| ) | ||
| } | ||
| }, |
There was a problem hiding this comment.
Agree, let's move this into Utils! Maybe call it isValidComponent?
src/Link.js
Outdated
| @@ -39,7 +40,13 @@ Link.defaultProps = { | |||
| } | |||
|
|
|||
| Link.propTypes = { | |||
| as: PropTypes.oneOf(['a', 'button', 'input', 'summary']), | |||
| as: (props, propName, componentName) => { | |||
There was a problem hiding this comment.
A custom validator function was necessary because oneOf([string, func]) doesn't allow components created with React.forwardRef()
There was a problem hiding this comment.
I'm generally ok with this change, but the reason we restricted element types from the beginning was to prevent people from using divs or other inaccessible elements for links. Can you add some documentation to the Link component about the importance of using an accessible element type?
Requesting changes for the docs additions & for moving that function into the utils file
src/Link.js
Outdated
| `Invalid prop '${propName}' supplied to '${componentName}': the prop is not a valid React component` | ||
| ) | ||
| } | ||
| }, |
There was a problem hiding this comment.
Agree, let's move this into Utils! Maybe call it isValidComponent?
Problem
It is sometimes necessary to pass the
Linkcomponent anasprop that is nota,button,inputorsummary. For example, when building a Gatsby site, I often want to render aLinkas aGatsbyLink:With out current setup, the above example produces this warning:
Fix
I updated the propTypes definition for
asto accept any valid React component type. I followed the approach outlined in this issue: facebook/react#5143 (comment).Merge checklist