Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-register-nodes-ie
Advanced tools
Register DOM nodes within a context. Helpful for UI where many siblings need to know about each other. A common example is scrolling to the first error after a form submission.
Readme
Register DOM nodes within a context. Helpful for UI where many siblings need to know about each other. A common example is scrolling to the first error after a form submission.
yarn add react-register-nodes
import * as React from "react";
import { render } from "react-dom";
import {
NodeManager,
useNodes,
useRegisteredRef
} from "react-register-nodes";
const Example = () => {
// useRegisteredRef will return a ref to be used on the DOM node you'd like
// to register. It accepts a string key to register the node under.
const ref = useRegisteredRef("shallow");
// useNodes will return an object containing any DOM nodes we have assigned our refs to
// in this case, our div will be mapped to the key 'shallow'
const nodes = useNodes();
return (
<React.Fragment>
<div ref={ref}>
Register Me!
</div>
<div>
Registered Nodes:
<pre>{JSON.stringify(Object.keys(nodes), null, 2)}</pre>
</div>
</React.Fragment>
);
};
const rootElement = document.getElementById("root");
render(
<div id="app">
<NodeManager>
<Example />
</NodeManager>
</div>,
rootElement
);
<NodeManager/>
This is the Context Provider. Must be above any components that call the use*
hooks.
useRegisteredRef(key: string): HTMLElement | undefined
Returns a ref
to be passed to your DOM node. The node assigned to ref.current
will be registered with the nearest NodeManager. Accepts an id to serve as the key to register the node under.
useNodes(): { [key: string]: HTMLElement }
Returns an object of all registered nodes. Nodes are keyed by the key you passed to useRegisteredRef
.
useOrderedNodes(sorter: (nodes: HTMLElement[]) => HTMLElement[]): HTMLElement[]
Returns all registered nodes in the order specified by sorter
. Uses DOM order by default.
FAQs
Register DOM nodes within a context. Helpful for UI where many siblings need to know about each other. A common example is scrolling to the first error after a form submission.
The npm package react-register-nodes-ie receives a total of 0 weekly downloads. As such, react-register-nodes-ie popularity was classified as not popular.
We found that react-register-nodes-ie demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.