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 hooks to get/set values: keep in mind that the GET value will return a Promise.

Hook	Returns
getRecoil	getter function, returns a promise
setRecoil	setter function

// 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.