recoil-anywhere's Introduction

Recoil Anywhere

This is a tiny little addition to Recoil.js. It allows you to use Recoil anywhere in your code, not just inside React Components. It also includes a useReactRef to enable using Recoil without components re-render.

Installation

The Recoil Anywhere package lives in npm. To install, run the following command:

npm install --save recoil-anywhere

Set up

Add Recoil Anywhere custom hook inside your Recoil Root:

import React from "react";
import { RecoilRoot } from "recoil";
import { RecoilAnywhere } from "recoil-anywhere";

function App() {
  return (
    <RecoilRoot>
      <RecoilAnywhere />
      ...
    </RecoilRoot>
  );
}

Now you can use Recoil anywhere

Examples

Using Recoil inside functions:

// atom.js
const CounterState = atom({
  key: "CounterState",
  default: 1,
});

// math.js
const multiply = (a, b) => a * b;

// component.tsx:
import { recoil } from "recoil-anywhere";
import { CounterState } from "./atom.js";
import { multiply } from "./math.js";

function Component() {
  function multiplyCounter(multiplier: number) {
    const counter = recoil.get(CounterState);
    return multiply(counter, multiplier);
  }
}

In fact, now Recoil can be used in any file, even outside React Components:

// computed.ts
import { recoil } from 'recoil-anywhere'
import { CounterState } from './atom.js'

const getMultipliedCounter = (multiplier: number) {
    const counter = recoil.get(CounterState)
    return counter * multiplier
}

Recoil Ref Hook

This package also contains Recoil Ref hook. It is like React's useRef, but in Recoil. It prevents unwanted re-renders when Recoil value is updated:

import { useRecoilRef } from 'recoil-anywhere'
import { CounterState } from './atom.js'

function Component() {
    const counter = useRecoilRef(CounterState)
    ...
}

Recommend Projects