Gathering detailed insights and metrics for @seznam/compose-react-refs
Gathering detailed insights and metrics for @seznam/compose-react-refs
Gathering detailed insights and metrics for @seznam/compose-react-refs
Gathering detailed insights and metrics for @seznam/compose-react-refs
A small utility that composes two or more react refs into a ref callback.
npm install @seznam/compose-react-refs
Typescript
Module System
Node Version
NPM Version
TypeScript (91.75%)
JavaScript (8.25%)
Total Downloads
48,536,659
Last Day
8,888
Last Week
333,054
Last Month
1,670,830
Last Year
17,572,616
ISC License
114 Stars
46 Commits
5 Forks
2 Watchers
1 Branches
5 Contributors
Updated on Jun 25, 2024
Minified
Minified + Gzipped
Latest Version
1.0.6
Package Id
@seznam/compose-react-refs@1.0.6
Size
3.66 kB
NPM Version
6.14.11
Node Version
14.16.0
Published on
Mar 19, 2021
Cumulative downloads
Total Downloads
Last Day
9.3%
8,888
Compared to previous day
Last Week
-24%
333,054
Compared to previous week
Last Month
8.6%
1,670,830
Compared to previous month
Last Year
61.9%
17,572,616
Compared to previous year
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.
compose-react-refs
is available as npm package, you can use npm
to install
it:
npm install --save @seznam/compose-react-refs
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:
1import * as React from 'react' 2import composeRefs from '@seznam/compose-react-refs' 3 4export default React.forwardRef((props, externalRef) => { 5 const myRef = React.useRef(null) 6 7 React.useEffect(() => { 8 myRef.current.focus() 9 }) 10 11 // No need to worry about nulls and undefined refs here, they will be 12 // filtered out automatically. 13 return <input {...props} ref={composeRefs(myRef, externalRef)}/> 14})
The composeRefs
function allows combining any number of refs:
1import * as React from 'react' 2import composeRefs from '@seznam/compose-react-refs' 3 4export default React.forwardRef((props, externalRef) => { 5 const myRef = React.useRef(null) 6 const otherRef = React.useRef(null) 7 return <input {...props} ref={composeRefs(myRef, null, undefined, otherRef, props.extraRef, externalRef)}/> 8})
The refs will be updated in the order in which they were provided to the
composeRefs
function. The composed ref passed to react is cached (no need to
use useMemo
in your
code), improving performance and preventing
unexpected ref updates.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 2/23 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
58 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More