recoil-nexus

R E C O I L - N E X U S

by Luis Antonio Canettoli Ordoñez

If you have been using recoil for a while, you might have faced it: outside React Components, it's not possible to get or update values from atoms.

This Typescript implementation relying on RxJS will workaround this issue and let you do so.

Live Example

• Simple Loader Example

Install

npm

npm i recoil-nexus

yarn

yarn add recoil-nexus

Usage

1. Add RecoilNexus as children of RecoilRoot

import React from "react";
import { RecoilRoot } from "recoil";
import RecoilNexus from "recoil-nexus";

export default function App() {
  return (
    <RecoilRoot>
      <RecoilNexus />

      {/* ... */}
    </RecoilRoot>
  );
}

export default App;

2. Use the following methods to get/set values passing your atom as a parameter.

Method	Returns
getRecoil	getter function, returns a promise
setRecoil	setter function, pass value to be set as second parameter

// Loading example
import { loadingState } from "../atoms/loadingState";
import { getRecoil, setRecoil } from "recoil-nexus";

export default async function toggleLoading() {
  const loading = await 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,
});

---

Credits

This is a Typescript port + enhancement of VeepCream's recoil-outside.