https://github.com/oslabs-beta/TotalRecoilJS

TotalRecoilJS is a tool created to help developers visualize/debug and track their Recoil state via a Chrome extension.
https://github.com/oslabs-beta/TotalRecoilJS

chrome-dev-tools javascript react recoil typescript

Last synced: 4 days ago
JSON representation

TotalRecoilJS is a tool created to help developers visualize/debug and track their Recoil state via a Chrome extension.

• Host: GitHub
• URL: https://github.com/oslabs-beta/TotalRecoilJS
• Owner: oslabs-beta
• Created: 2020-07-11T18:23:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-03T00:57:50.000Z (about 4 years ago)
• Last Synced: 2024-08-17T01:19:11.468Z (3 months ago)
• Topics: chrome-dev-tools, javascript, react, recoil, typescript
• Language: JavaScript
• Homepage: https://totalrecoiljs.com/
• Size: 5.45 MB
• Stars: 193
• Watchers: 5
• Forks: 15
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - TotalRecoilJS - beta | 195 | (JavaScript)

README

        







  

    

  

  

  


    A tool for Recoil developers

    


    Download Chrome Extension»

    


    


    View Demo App (Recoil Application)

    

  


## Table of Contents

* [About the Project](#about-the-project)

  * [Built With](#built-with)

* [Getting Started](#getting-started)

  * [Prerequisites](#prerequisites)

  * [Installation](#installation)

* [Usage](#usage)

* [License](#license)

* [Authors](#authors)

* [Acknowledgements](#acknowledgements)

## About The Project

Total RecoilJS is a tool created to help developers visualize and track their Recoil state via a Chrome extension.

### Built With

* [React](https://reactjs.org/)

* [D3](https://d3js.org/)

* [TypeScript](https://www.typescriptlang.org/)

* [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)

## Getting Started

To get a local copy up and running, follow these simple steps.

### Prerequisites

Install React DevTools

```sh

https://chrome.google.com/webstore/detail/react-developer-tools/

```

### Installation

 

1. Clone the TotalRecoilJS github

```sh

git clone https://github.com/oslabs-beta/TotalRecoilJS.git

```

2. Install NPM packages

```sh

npm install

```

3. Start development server

```sh

npm run dev

```

4. Unpack to Google Chrome Extensions 

5. Navigate to Extensions -> Load Unpacked -> Select Total-Recoil/build/extension

![](/src/img/installApp.gif)

## Usage

Visualize your component tree and see which components are subscribed to which atoms. When you click on an atom’s name, all components that are subscribed to that piece of state will light up.

Troubleshoot by seeing the current state held in each atom. 

![](/src/img/showState-tab.gif)

View list of previous states to track changes. 

On the history tab, you can see up to 10 previous state snapshots.

![](/src/img/history-tab.gif)

 View all selector-atom subscriptions using our interactive sunburst and click on any selector to see all subscribed atoms.

  

  ![](/src/img/selector.gif)

## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

## License

Distributed under the MIT License. See `LICENSE` for more information.

## Authors

Anthony Lee - [@linkedIn](https://www.linkedin.com/in/anthony-lee27/) - [@GitHub](https://github.com/anthonylee2797)


Khizar Rehman - [@linkedIn](https://www.linkedin.com/in/khizar-rehman-a125711b4/) - [@GitHub](https://github.com/keyz-man)


Silvia Miranda - [@linkedIn](https://www.linkedin.com/in/silviakempmiranda/) - [@GitHub](https://github.com/silvia-miranda)


Zi Hao He - [@linkedIn](https://www.linkedin.com/in/zi-hao-he/) - [@GitHub](https://github.com/exquizzle)


Kevin Ruan - [@linkedIn](https://www.linkedin.com/in/kevin-ruan-7799711b1/) - [@GitHub](https://github.com/kevinr108)


## Acknowledgements

Denys Dekhtiarenko - [@linkedIn](https://www.linkedin.com/in/denysdekhtiarenko/) - [@GitHub](https://github.com/denskarlet)

[contributors-shield]: https://github.com/oslabs-beta/TotalRecoilJS/graphs/contributors

[contributors-url]: https://github.com/oslabs-beta/TotalRecoilJS/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square

[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members

[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square

[stars-url]: https://github.com/oslabs-beta/TotalRecoilJS/stargazers

[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square

[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt

[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555

[linkedin-url]: https://linkedin.com/in/othneildrew

[product-screenshot]: images/screenshot.png