1.0.4 • Published 30 days ago
@mrii/react-proxy-ref v1.0.4
@mrii/react-proxy-ref
A simple package to create one ref for multiple elements.
if you have a case where you need to create a large/dynamic number of refs, this package is the best fit for it.
it'll exports a hook that will create a proxy object, so you can assign multiple refs to it.
Installation
# yarn
yarn add @mrii/react-proxy-ref
# npm
npm i @mrii/react-proxy-ref
Usage
import type React from 'react';
import { useProxyRef } from '@mrii/react-proxy-ref';
export const Component: React.FC = () => {
const proxyRef = useProxyRef<HTMLInputElement | null>(
null /* defaultValue, optional, default to `null` */
);
const way1 = () => {
// use the refs if you know the names
proxyRef.email.current?.value;
proxyRef.password.current?.value;
};
const way2 = () => {
// get all the refs if it's dynamic
const refs = Object.values(proxyRef);
refs.forEach(ref => {
ref.current?.value;
});
};
return (
<>
<input ref={proxyRef.email} name='email' />
<input ref={proxyRef.password} name='password' />
</>
);
};
How it works
it will create a proxy that will return { current: defaultValue }
when you'll try to access a key from it, and it will store it in the proxy, so you can access the value later