react-with-forwarded-ref
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.3 • Public • Published

    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!

    Install

    npm i react-with-forwarded-ref

    DownloadsWeekly Downloads

    5,826

    Version

    0.3.3

    License

    BSD-3

    Unpacked Size

    15.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • rpearce