react-with-forwarded-ref
v1.0.1
Published
React higher-order component (HOC) for ref forwarding
Downloads
53,631
Maintainers
Readme
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
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):
This project follows the all-contributors specification. Contributions of any kind welcome!