sindresorhus / Unstated Debug
Licence: mit
Debug your Unstated containers with ease
Stars: ✭ 231
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Unstated Debug
Bloc.js
A predictable state management library that helps implement the BLoC design pattern in JavaScript
Stars: ✭ 111 (-51.95%)
Mutual labels: npm-package, state-management
kladi
Easy to use state management library for React
Stars: ✭ 24 (-89.61%)
Mutual labels: state-management, npm-package
Node Cli Boilerplate
Boilerplate to kickstart creating a Node.js command-line tool
Stars: ✭ 209 (-9.52%)
Mutual labels: npm-package
Use Machine
React Hook for using Statecharts powered by XState. use-machine.
Stars: ✭ 226 (-2.16%)
Mutual labels: state-management
Devonfw4flutter
A guide aiming to bridge the gap between the absolute Flutter basics and clean, structured Flutter Development
Stars: ✭ 219 (-5.19%)
Mutual labels: state-management
React Organism
Dead simple React state management to bring pure components alive
Stars: ✭ 219 (-5.19%)
Mutual labels: state-management
Reusable
Reusable is a library for state management using React hooks
Stars: ✭ 207 (-10.39%)
Mutual labels: state-management
Json2typescript
Convert JSON to TypeScript with secure type checking!
Stars: ✭ 230 (-0.43%)
Mutual labels: npm-package
Pinyinlite
Lightweight and Lightning-Fast ⚡️ Pinyin Library for JavaScript
Stars: ✭ 218 (-5.63%)
Mutual labels: npm-package
Ts ci
✅ Continuous integration setup for TypeScript projects via GitHub Actions.
Stars: ✭ 225 (-2.6%)
Mutual labels: npm-package
Hydux
A light-weight type-safe Elm-like alternative for Redux ecosystem, inspired by hyperapp and Elmish
Stars: ✭ 216 (-6.49%)
Mutual labels: state-management
Controllerim
A state management library for React
Stars: ✭ 213 (-7.79%)
Mutual labels: state-management
Bitcoin Chart Cli
Bitcoin chart for the terminal as command line util
Stars: ✭ 221 (-4.33%)
Mutual labels: npm-package
React Easy State
Simple React state management. Made with ❤️ and ES6 Proxies.
Stars: ✭ 2,459 (+964.5%)
Mutual labels: state-management
React Npm Boilerplate
Boilerplate for creating React Npm packages with ES2015
Stars: ✭ 226 (-2.16%)
Mutual labels: npm-package
Tinystate
A tiny, yet powerful state management library for Angular
Stars: ✭ 207 (-10.39%)
Mutual labels: state-management
Tailor made
✄ Managing a Fashion designer's daily routine.
Stars: ✭ 219 (-5.19%)
Mutual labels: state-management
Node Virtualbox
A JavaScript Library for Interacting with VirtualBox
Stars: ✭ 231 (+0%)
Mutual labels: npm-package
unstated-debug
Debug your Unstated containers with ease
Install
$ npm install unstated-debug
Setup
In the root of your app, import unstated-debug
:
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'unstated';
import UNSTATED from 'unstated-debug';
import App from './components/App';
UNSTATED.logStateChanges = false;
render(
<Provider>
<App/>
</Provider>,
document.querySelector('#root')
);
Usage
When enabled, it exposes a global object UNSTATED
which you can use in DevTools to explore the containers and their state.
The object contains the following properties:
-
isEnabled
- Same as the below option, but you can change it after init. -
logStateChanges
- Same as the below option, but you can change it after init. -
isCollapsed
- Collapse logs. (Default: false) -
containers
- Your containers. -
states
- The state objects of your containers. -
logState()
- Logs the current state of your containers.
API
UNSTATED
isEnabled
Type: boolean
Default: true
Toggle debugging.
For example, if you use this in an Electron app, you could pass it is.development
to ensure debugging is disabled in production.
logStateChanges
Type: boolean
Default: true
Logs a diff for each state change to the containers. This gives you a live insight into state changes in your app.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].