react-context-refs


Library to get react refs via context. For example it can be useful when you need to scroll or set focus to some field after form validation and you have a deep nested components hierarchy.

Fields focus example

First, you should add RefProvider.

main.js

``jsx
import * as React from "react";
import { render } from "ract-dom";
import { RefProvider } from "react-context-refs";
import Page from "./form";

// ...

render(


,
element
);
`

Then you need to add each field to context refs storage. You can add some metadata to your refs. In this example we add hasError property to refs.

someField.js

`jsx
import * as React from "react";
import { useContextRef } from "react-context-refs";

export default ({ value, onChange, hasError }) => {
const setRef = useContextRef({ hasError });

return (
style={hasError ? { backgroundColor: "#FFCABF" } : {}}
ref={setRef}
value={value}
onChange={onChange}
/>
);
};
`

And then in some root component you can get all refs and set focus to any of them.

`jsx
import * as React from "react";
import { useRefs } from "react-context-refs";
import { compareOrder } from "sort-nodes";

// ...

export default props => {
// ...

const refs = useRefs();
const onSubmit = () => {
if (!isFormValid()) {
const firstFieldWithError = refs
// remove fields without errors
.filter(ref => ref.meta.hasError)
// get current value of refs
.map(ref => ref.current)
// sort by order in dom tree
.sort(compareOrder)[0];

firstFieldWithError.focus();
return;
}
// ...
};

return