Package Exports

@seznam/compose-react-refs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@seznam/compose-react-refs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Compose react refs

npm type definitions

A simple utility for composing two or more react refs (ref objects and callbacks are both supported and can be mixed) into a single callback ref. This enables you to effectively set multiple refs on the same component/element.

This utility does not use react hooks, therefore it can be used in class components (and even outside of react world) safely.

Installation

compose-react-refs is available as npm package, you can use npm to install it:

npm install --save @seznam/compose-react-refs

Usage

The following example shows usage in a functional component that composes an external ref with its own ref it uses to focus the renderer <input> element:

import * as React from 'react'
import composeRefs from '@seznam/compose-react-refs'

export default React.forwardRef((props, externalRef) => {
  const myRef = React.useRef(null)
  
  React.useEffect(() => {
    myRef.current.focus()
  })

  return <input {...props} ref={composeRefs(myRef, externalRef)}/>
})

The refs will be updated in the order in which they were provided to the composeRefs function.