Skip to main content

@mrii/react-proxy-ref@1.0.2

A simple package to create one ref for multiple elements.

Works with
This package works with Bun
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Browsers
JSR Score
76%
Published
2 weeks ago

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.

This package is using lbundle as bundler ✨

Installation

NPM registry

# npm
npm i react-proxy-ref

# yarn
yarn add react-proxy-ref

# bun
bun install react-proxy-ref

# pnpm
pnpm i react-proxy-ref

JSR registry

# deno
deno add @mrii/react-proxy-ref

# jsr
npx jsr add @mrii/react-proxy-ref

Usage

import { useProxyRef } from 'react-proxy-ref';

// or with jsr registry
// 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 = useCallback(() => {
    // use the refs if you know the names
    proxyRef.email.current?.value;
    proxyRef.password.current?.value;
  }, []);

  const way2 = useCallback(() => {
    // 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

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @mrii/react-proxy-ref

Import symbol

import * as mod from "@mrii/react-proxy-ref";

Add Package

npx jsr add @mrii/react-proxy-ref

Import symbol

import * as mod from "@mrii/react-proxy-ref";

Add Package

yarn dlx jsr add @mrii/react-proxy-ref

Import symbol

import * as mod from "@mrii/react-proxy-ref";

Add Package

pnpm dlx jsr add @mrii/react-proxy-ref

Import symbol

import * as mod from "@mrii/react-proxy-ref";

Add Package

bunx jsr add @mrii/react-proxy-ref

Import symbol

import * as mod from "@mrii/react-proxy-ref";