DevTool

Development tool component for debugging and monitoring Signify state.

Description

The DevTool component provides a visual debugging interface for monitoring state changes in development. It displays the current state value in a draggable, resizable popup window with syntax highlighting and real-time updates.

Input/Output

Input	Type	Description
name	string	Name identifier for the DevTool window
item	Signify instance	The signify instance to monitor and display
color	string (optional)	Custom color for the DevTool window header

Output	Type	Description
Returns	React.Component	DevTool component for state debugging

Features

• Draggable: Move the tool window around the screen
• Resizable: Adjust window size as needed
• Persistent: Position and size are saved in cookies
• Real-time: Updates automatically when state changes
• Syntax Highlighting: JSON formatting for complex objects

Example

import { signify } from 'react-signify';
import { DevTool } from 'react-signify/devtool';
import React from 'react';

const sUser = signify({
  personal: { name: 'John', age: 25 },
  settings: { theme: 'dark', notifications: true },
  stats: { posts: 10, followers: 100 }
});

const sCounter = signify(0);

// Create a slice for specific data monitoring
const ssUserPersonal = sUser.slice((state) => state.personal);

function App() {
  return (
    <div>
      <h1>My App</h1>
      
      {/* Basic DevTool */}
      <DevTool name="User State" item={sUser} />
      
      {/* DevTool with sliced data and custom color */}
      <DevTool 
        name="User Personal Info"
        item={ssUserPersonal}
        color="rgb(100, 150, 200)"
      />
      
      {/* Counter DevTool */}
      <DevTool 
        name="Counter"
        item={sCounter}
        color="rgb(255, 100, 100)"
      />
      
      <button 
        onClick={() => sUser.set(({ value }) => {
          value.stats.posts++;
        })}
      >
        Add Post
      </button>
      
      <button onClick={() => sCounter.set(sCounter.value + 1)}>
        Increment
      </button>
    </div>
  );
}

Note: DevTool should only be used in development environments. Consider wrapping it in a development check:

{process.env.NODE_ENV === 'development' && (
  <DevTool name="Debug State" item={myState} />
)}

Displaying Specific Data

To show only part of your state data, use signify's slice method to create a focused view:

const sAppState = signify({
  user: { name: 'John', email: 'john@example.com' },
  settings: { theme: 'dark', language: 'en' },
  ui: { isLoading: false, modal: null }
});

// Create slices for specific parts
const ssUser = sAppState.slice(state => state.user);
const ssSettings = sAppState.slice(state => state.settings);

function App() {
  return (
    <div>
      {process.env.NODE_ENV === 'development' && (
        <>
          {/* Full state */}
          <DevTool name="Complete App State" item={sAppState} />
          
          {/* Only user data */}
          <DevTool name="User Info" item={ssUser} />
          
          {/* Only settings */}
          <DevTool name="Settings" item={ssSettings} />
        </>
      )}
    </div>
  );
}