react-with-forwarded-ref

React higher-order component (HOC) for ref forwarding

Usage no npm install needed!

<script type="module">
  import reactWithForwardedRef from 'https://cdn.skypack.dev/react-with-forwarded-ref';
</script>

README

react-with-forwarded-ref

npm version npm downloads bundlephobia size All Contributors

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