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
useRecoilNexus	returns getter/setter tuple
useRecoilNexusValue	returns getter only, which will return a promise
useRecoilNexusSetValue	returns setter function

// Loading example
import { loadingState } from '../atoms/loadingState'
import { useRecoilNexus, useRecoilNexusValue, useRecoilNexusSetValue } from 'recoil-nexus'

export default async function toggleLoading() {

  const [getLoading, setLoading] = useRecoilNexus(loadingState) 
  const loading = await getLoading()
 
  setLoading(!loading)
  
}

//Loader
import React from 'react'
import { useRecoilNexus } from 'recoil-nexus'

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
})
  

Warning

Using them on the top level of a file is fully functional, however it will trigger es-lint checker.

React Hook "useRecoilNexus" cannot be called at the top level. 
React Hooks must be called in a React function component or a custom React Hook function  

react-hooks/rules-of-hooks

To workaround this you can either:

• import with an alias

import { useRecoilNexus as _useNexus } from 'recoil-nexus'

• or disable es-lint rule for the single line:

// eslint-disable-next-line react-hooks/rules-of-hooks

• or disable the Hooks Rule for the whole file (not recommended):

/* eslint-disable react-hooks/rules-of-hooks */

---

Credits

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