If you have been using recoil for a while, you might have faced that outside React Components it's not possible to get or update values from atoms.
This Typescript implementation will workaround the issue and let you do so.
npm
npm i recoil-nexus
yarn
yarn add recoil-nexus
import React from "react";
import { RecoilRoot } from "recoil";
import RecoilNexus from "recoil-nexus";
export default function App() {
return (
<RecoilRoot>
<RecoilNexus />
{/* ... */}
</RecoilRoot>
);
}
export default App;
Method | Returns |
---|---|
getRecoil |
getter function |
getRecoilPromise |
getter function, returns a promise. To be used with asynchronous selectors. |
setRecoil |
setter function, pass value to be set as second parameter |
resetRecoil |
pass atom as parameter to reset to default value |
// Loading example
import { loadingState } from "../atoms/loadingState";
import { getRecoil, setRecoil } from "recoil-nexus";
export default function toggleLoading() {
const loading = getRecoil(loadingState);
setRecoil(loadingState, !loading);
}
//Loader
import React from "react";
import { useRecoilValue } from "recoil";
export default function Loader() {
loading = useRecoilValue(loadingState);
return loading ? <h3>Loading...</h3> : null;
}
//Atom
import { atom } from "recoil";
export const loadingState = atom({
key: "LOADING",
default: false,
});
Kudos to VeepCream's recoil-outside original idea and Javascript implementation.
In this Typescript port/enhancement, I decided to remove RxJS and rely on native Recoil promises and loadables only.