rn

recoil-nexus

A small Typescript package to access your Recoil atoms outside of React components.

Showing:

Popularity

Downloads/wk

101

GitHub Stars

17

Maintenance

Last Commit

6d ago

Contributors

2

Package

Dependencies

1

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

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.

Live Example

Install

npm

npm i recoil-nexus

yarn

yarn add recoil-nexus

Usage

1. Add RecoilNexus in your 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.

MethodReturns
getRecoilgetter function
getRecoilPromisegetter function, returns a promise. To be used with asynchronous selectors.
setRecoilsetter function, pass value to be set as second parameter
resetRecoilpass 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,
});

Credits

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial