https://github.com/polemius/recoil-logger

Logger for state manager recoil
https://github.com/polemius/recoil-logger

javascript recoiljs state-management

Last synced: about 2 months ago
JSON representation

Logger for state manager recoil

• Host: GitHub
• URL: https://github.com/polemius/recoil-logger
• Owner: polemius
• License: mit
• Created: 2020-05-17T13:21:07.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T06:11:05.000Z (over 1 year ago)
• Last Synced: 2024-05-13T05:41:10.544Z (4 months ago)
• Topics: javascript, recoiljs, state-management
• Language: JavaScript
• Homepage: https://recoil-demo-logger.polemius.dev/
• Size: 2.87 MB
• Stars: 56
• Watchers: 5
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Recoil-logger

Logger for state manager [recoil](https://recoiljs.org).

[Demo](https://recoil-demo-logger.polemius.dev/)

![Example of logs in browser's conosle](example.gif)

```js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import { RecoilRoot } from "recoil";

import RecoilLogger from 'recoil-logger'

ReactDOM.render(

  

    

      

      

    

  ,

  document.getElementById('root')

);

```

## Install

```

npm install --save-dev recoil-logger

```

or

```

yarn add --dev recoil-logger

```

Now you could add `RecoilLogger` to your app:

```diff

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import { RecoilRoot } from "recoil";

import RecoilLogger from 'recoil-logger'

ReactDOM.render(

  

    

+       {/* Please add this line inside `RecoilRoot` scope */}

      

    

  ,

  document.getElementById('root')

);

```

After this you can see the events on **each** atom in browser's console:

![Example of logs in browser's conosle](console1.png)

But to see the values you need to add `persistence_UNSTABLE` key to atom properties:

```diff

const counterState = atom({

  key: "count",

  default: 0,

+  persistence_UNSTABLE: {

+    type: 'log'

+  },

});

```

The key `type` can has any value but not `none` (by default it is `none`).

![Example of logs in browser's conosle](console2.png)

## Notes

This package use unstable hook `useTransactionObservation_UNSTABLE`. 

As far it will be stable the package will be updated with new API.

## Demo

```

$ git clone [email protected]:polemius/recoil-logger.git

$ cd recoil-logger

$ npm install

$ npm run start

```

Please open [localhost:1234](http://localhost:1234)