rpearce/react-with-forwarded-ref

React higher-order component (HOC) for ref forwarding

react-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
• Usage
• All Contributors
• Authors
• Changelog
• Contributing
• Code of Conduct

Installation

npm i react-with-forwarded-ref

or

yarn add react-with-forwarded-ref

Usage

Let's say you have a react component named Comp:

// Comp.js file

const Comp = ({ children, className }) => (
  <div className={className}>
    {children}
  </div>
)

export default Comp

If 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!