Recoilens NPM | npm.io

Recoilens Recoil Logger Library - RRLL

The Recoilens provides a custom state logger for Recoil, a state management library for React. It allows you to track changes in a specific atom and display a message as a popup.

Installation

To install the Recoil Logger Library, use npm or yarn:

npm install recoilens
# or
yarn add recoilens

Usage

1. Import the Library

import RecoilLogger from "recoilens";

2. Wrap your Application in `RecoilRoot`

Wrap your application with RecoilRoot to provide the Recoil state context:

import { RecoilRoot } from "recoil";

const App = () => {
  return (
    <RecoilRoot>
      <RecoilLogger value={myAtom} />
      {/* Other components */}
    </RecoilRoot>
  );
};

export default App;

3. Add Atom and Controls

Define your Recoil atom and add controls to interact with it:

import { useRecoilState, atom } from "recoil";

export const myAtom = atom({
  key: "myAtom",
  default: {
    property: 0,
  },
});

const ButtonControls = () => {
  const [currentValue, setCurrentValue] = useRecoilState(myAtom);

  const increaseValue = () => {
    setCurrentValue((prevValue) => {
      const updatedValue = {
        ...prevValue,
        property: prevValue.property + 1,
      };
      return updatedValue;
    });
  };

  const decreaseValue = () => {
    setCurrentValue((prevValue) => {
      const updatedValue = {
        ...prevValue,
        property: prevValue.property - 1,
      };
      return updatedValue;
    });
  };

  return (
    <div>
      <button onClick={increaseValue}>Increase Value</button>
      <button onClick={decreaseValue}>Decrease Value</button>
      <div>Current Value: {currentValue}</div>
    </div>
  );
};