rpearcereact-with-forwarded-ref
This React.js higher-order component
(HOC) exists to provide
an appropriate wrapper for components that utilize
forwarded refs. It accepts a
ref via props and renames ref to forwardedRef along
with whatever other props are passed in.
Links
Installation
npm i react-with-forwarded-refor
yarn add react-with-forwarded-refUsage
Let's say you have a react component named Comp:
// Comp.js file
const Comp = ({ children, className }) => (
<div className={className}>
{children}
</div>
)
export default CompIf you're using React.createRef()
and want to pass this ref to a child component, you need to utilize
forwarded refs. This component
handles all the hassle by using the higher-order component
(HOC) pattern to wrap
your component, accept the ref, and forward it to you as forwardedRef.
// Comp.js file
import withForwardedRef from 'react-with-forwarded-ref'
const Comp = ({ children, className, forwardedRef }) => (
<div className={className} ref={forwardedRef}>
{children}
</div>
)
export default withForwardedRef(Comp)Contributors
Thanks goes to these wonderful people (emoji key):
 Robert Pearce 💻 📖 💡 🤔 ⚠️ |
 Kristián Žuffa 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!